Container

Presents a simple HTML container where you can place any content.

To use the control you must include one extra file dhtmlxform_item_container.js:

<script src="../../codebase/ext/dhtmlxform_item_container.js"></script>

• 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 icon after the input label (related event - onInfo)
• inputHeight - (integer or auto) the height of input. The default value is auto
• inputWidth - (integer or auto) the width of input. The default value is auto
• inputLeft - (integer) sets the left absolute offset of input. Just position:“absolute” makes sense of the attribute
• inputTop - (integer) sets the top absolute offset of input. Just position:“absolute” makes sense of the attribute
• label - (string) the text label of item
• labelLeft - (integer) sets the left absolute offset of label. Just position:“absolute” makes sense of the attribute
• labelTop - (integer) sets the top absolute offset of label. Just position:“absolute” makes sense of the attribute
• name - (string) the identification name. Used for referring to item
• note - (object) creates the details block which is placed under the input
  • text - (string) the text of the block
  • width - (integer) the width of the block
• offsetLeft - (integer) sets the left relative offset of item (both input and label)
• offsetTop - (integer) sets the top relative offset of item (both input and label)
• position - (label-left, label-right, label-top or absolute) defines the position of label relative to input
• required - (boolean) adds the icon after the label marking the input as mandatory. Also, setting the attribute to true automatically assignes 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}
];

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.
• method getContainer() returns an HTMLDivElement object of the control.

For example, to integrate dhtmlxGrid into 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