Logo F2FInterview

DHTMLX Touch Interview Questions

Q   |   QA

Attaching to HTML-item.
During components creation, the major part of them are already attached to certain place on page through parent HTML-item. In most cases, div-item is used for this purpose. Item's identifier or link are passed to component constructor. Some components allow to change parent item after initialization. Another way to relocate component within document structure is relocating its parent item.    

<div id="mygrid"></div>

    myGrid = new dhtmlXGridObject("mygrid");

Placing inside dhtmlxLayout.
If at the beginning, you place dhtmlxLayout on page (on empty page, you can attach it just to document.body), after that you can allocate components inside its cells. You are allowed to do the same with dhtmlxTabbar, dhtmlxWindows. For these components, items from items, windows and tabs collections, accordingly, are used as container with the same capabilities.

myLayout = new dhtmlXLayout(document.body,"3E");
   myGrid = myLayout.items(0).attachGrid();

There are three ways to initialize any component of the suite:

Through constructor function.

  • This way of initialization is valid for all components. The names of all component constructors coincide with the names of components (since version 2.5). The major part of components are initialized with a certain set of parameters, we will go into details of this later. So, below you can see an example of windows system initialization through the constructor:
myWindows = new dhtmlxWindows();
  • Through appropriated methods of dhtmlxLayout component: attachTree, attachGrid, attachMenu etc. (for Layout API documentation, see here api_toc_alpha). The procedure is almost the same, there is only one difference, instead of constructor function you should write layout method (or more exactly, the method of separate layout panel). As result the component is initialized directly into the appropriate panel.
  • Directly from HTML objects, their class attribute (name of css class) is set in the value corresponding to component name: for tree - dhtmlxTree, for grid - dhtmlxGrid, for tabbar - dhtmlxTabbar. If you need this way of initialization, see documentation for more details.

Through methods.
In most cases, methods which allow to set parameters start with “set”, “enable” (setInitWidth, enableMathSerialization). The list of basic and optional methods required for component initialization is located in constructor function section of API documentation of each component. (part “Original Way of Initialization”).

myGrid = new dhtmlXGridObject("grid_container");

Through objects properties (since version 2.5, there is extension for object initialization/configuration).
The list of basic and optional properties required for component initialization is located in constructor function section of API documentation of each component. (part “Original Way of Initialization”).    

myGrid = new dhtmlXGridObject({

        parent: "grid_container",
        image_path: "codebase/imgs/",
        skin: "light",
        columns: [
                 label: "Model",
                 width: "*",
                 align: "left",
                 label: "Qty",
                 width: 150,
                 align: "right",
                 label: "Price",
                 width: 150,
                 align: "right",

Through XML.
Grid supports this way of initialization. Grid and columns parameters are indicated in special partition of XML-document, which can be loaded from server with all data for rows (or without it).

There are some parameters which can be set for all components on page at once. Currently they are: skin name and path to images.

  • through global dhtmlx object;
  • through parameters of dhtmlxLayout object, which contains used components.

If these parameters are set for concrete objects later, they will have priority status.

attachEvent(event_name,handler_function) allows to set event handlers for any components of dhtmlxSuite. For lists of events see Script API Reference partition, which is located at the foot of generic page of any component documentation. Note: names of events are case-insensitive.

Nearly every event passes to function-handler some parameters which can be used in this function. Such parameters are listed in documentation. This is an example:

    alert("Row was selected. It's id is "+ rowId +". Index of clicked cell is "+ cellInd)

In order to link this F2FInterview's page as Reference on your website or Blog, click on below text area and pres (CTRL-C) to copy the code in clipboard or right click then copy the following lines after that paste into your website or Blog.

Get Reference Link To This Page: (copy below code by (CTRL-C) and paste into your website or Blog)
HTML Rendering of above code: