Controls

button

A button.

TYPES
Standard buttons Round corner buttons Pointing buttons
by default 'default' 'form' 'round' 'prev' 'next'
  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • click - (function) the function which will be executed on button click.
  • css - (css class) additional css class for parent <div> container.
  • id - (string,integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • label - (string) the text label of control.
  • popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to the button (possible values: right, left. Default value - center). By default, popup appears under the button but if space is limited it'll appear over (know more here)
  • type - ('default', 'form', 'next', 'prev', 'round') - the type of button. In case you don't specify the parameter, the control will look like the button shown in the first column of the table above ( stated as by default).
  • width - (integer) the width of area assigned to control.
{ view:"button", id:"button1", type:"round", label: "Button", inputWidth:100, align:"center"}

Related sample: 02_form/10_styling_buttons.html
API Reference: Methods, properties, events

Back to top

checkbox

A check-box.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • label - (string) the text label of control.
  • labelAlign - (left, right or center) the alignment of label within the defined width.
  • labelWidth - (integer) the width of label.
  • labelPosition - (left, right) the position of label relative to check box.
  • popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • value - (boolean:true/false or 0/1) the initial value of element (the default value is 0 - check box is not checked).
  • width - (integer) the width of area assigned to control.
{ view:"checkbox", id: "field_a", label:"find hotels", labelWidth: 150, value: 1, labelPosition: "left"}

Related sample: 02_form/01_init.html
API Reference: Methods, properties, events

Back to top

combo

A combo box.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • data - specifies select options of control.
    • id - (string,integer) the identification name of option.
    • value - (string) the text label of option.
  • id - (string,integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • label - (string) the text label of control.
  • labelAlign - (left, right or center) the alignment of label within the defined width.
  • labelWidth - (integer) the width of label.
  • maxLength - (integer) the maximum number of characters that a user can enter in the field.
  • options - specifies select options of control. A simpler alternative to data parameter.
    • label - (string) the text label of option.
    • value - (string, integer) the value (id) of option.
  • placeholder - (string) sets text of a placeholder ( text which is displayed when the field is empty and not focused).
  • readonly - (boolean) makes the field read-only, i.e. disallows users to enter data. By default - false.
  • value - (string,integer) the id of initial option.
  • width - (integer) the width of area assigned to control.
  • yCount - (integer) specifies the number of options.
  • iconCss - (string or boolean) defines a css class for the control icon. By default - “dhx_list_icon” . The value false allows you to hide the icon.
  • iconWidth - (integer) the width of the control icon.
//using 'data' parameter to specify select options
{ view:"combo",id: "field_b", label: "Combo", value:1, yCount:"3", data:[
									{ id:1, value:"One"   }, 
									{ id:2, value:"Two"   }, 
									{ id:3, value:"Three" }
]}
//or 
//using 'options' parameter to specify select options
{ view:"combo",id: "field_b", label: "Combo", value:1, yCount:"3", options:[
									{ value:1, label:"One"   }, 
									{ value:2, label:"Two"   }, 
									{ value:3, label:"Three" }
]}

You can refer to the inner pop-up list through $$(“comboId_list”):

dhx.ui({ view:"combo",id: "myCombo", options:[
					{ value:1, label:"One"   }, 
					{ value:2, label:"Two"   }, 
					{ value:3, label:"Three" }]
})
var items=$$('myCombo_list').dataCount();
alert(items);

Related sample: 02_form/01_init.html
API Reference: Methods, properties, events

Back to top

counter

An element area which contains a label and a counter.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string,integer) identification name. Used for referring to component.
  • label - (string) the text label of control.
  • labelAlign - (left, right or center) the alignment of label within the defined width.
  • labelWidth - (integer) the width of label.
  • max - (integer) the maximum value of element.
  • min - (integer) the minimum value of element.
  • labelPosition - (left, right) the position of label relative to the field which represents the current value.
  • popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • step - (integer) the difference between two successive values of the element.
  • value - (integer) the initial value of control.
  • valueWidth - (integer or “auto”) the width of the field which represents the current value.
  • width - (integer) the width of area assigned to control.
{view:"counter", id:"field_c", label: 'Quantity', step: 10, valueWidth: "auto", value: 150, min: 100, max: 200, labelWidth: 100, labelPosition: "left", labelAlign: "left"}

Related sample: 02_form/01_init.html
API Reference: Methods, properties, events

Back to top

datepicker

A control area that contains label and pop-up calendar.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • label - (string) the text label of control.
  • labelWidth - (integer) the width of label.
  • labelAlign - (left, right or center) the alignment of label within the defined width.
  • value - (string) the initial value of the control (available date formats).
  • width - (integer) the width of area assigned to control.
  • iconCss - (string or boolean) defines a css class for the control icon. By default - “dhx_list_icon” . The value false allows you to hide the icon.
  • iconWidth - (integer) the width of the control icon.

Note, in addition to native datePicker properties, you can use any of calendar properties.

{ view:"datepicker", id:"calendar", label:'Date', timeSelect:true, labelAlign:"left", labelWidth:100 }

You can refer to the inner pop-up calendar through $$(“datepickerId_calendar”):

dhx.ui({ view:"datepicker",id: "myDatepicker", value:"12-03-2011"})
var currentDate=$$('myDatepicker_calendar').getValue();
alert(currentDate);

Related sample: 02_form/01_init.html
API Reference: Methods, properties, events

Back to top

icon

A ready-to-use icon.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • icon - (predefined name) the type of icon. All the available icon types.
  • id - (string, integer) identification name. Used for referring to component.
  • popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • width - (integer) the width of area assigned to control.
{ view:"icon", icon: 'refresh', align:"left"}

API Reference: Methods, properties, events

Back to top

input

A text input field.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • disabled - (boolean) disables the field. Once set, the field becomes grey. By default - false.
  • id - (string,integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • maxLength - (integer) the maximum number of characters that a user can enter in the field.
  • placeholder - (string) sets text of a placeholder ( text which is displayed when the field is empty and not focused).
  • popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • readonly - (boolean) makes the field read-only, i.e. disallows users to enter data. By default - false.
  • type - (password, text) sets the type of the field. By default - text.
  • value - (string,integer) the initial text in the field.
  • width - (integer) the width of area assigned to control.
{view:"input", placeholder:"some text", type:"password"}

API Reference: Methods, properties, events

Back to top

imagebutton

An element that represents text label and an image.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • click - (function) the function which will be executed when you click on control (both label and image).
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • label - (string) the text label of control.
  • popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • src - (URL) the path to the image.
  • width - (integer) the width of area assigned to control.
{ view:"imagebutton", src:"imgs/true.gif", label:"Check", align:"center"}

API Reference: Methods, properties, events

Back to top

label

A normal text label.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • label - (string) the text label of control.
  • width - (integer) the width of area assigned to control.
{ view:"label", label: "Label", inputWidth:100, align:"center"}

API Reference: Methods, properties, events

Back to top

radio

A block of the radio buttons (can contain only one radio button). Use height (inherited from view) and labelWidth parameters to set the desired position of buttons.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • labelAlign - (left, right or center) the alignment of labels within the defined width.
  • labelWidth - (integer) the width of labels.
  • options - specifies radio buttons of control.
    • label - (string) the text label of radio button.
    • value - (string,integer) the value of radio button.
  • labelPosition - (left, right) the position of labels relative to radio buttons.
  • popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • value - (string, integer) the initial value of control (sets the value of button which will be checked initially).
  • width - (integer) the width of area assigned to control.
{ view:"radio",id:"radio1", labelPosition: "left", labelWidth: 90, labelAlign: "left",  value:"a2", options:[
									{ label:"option 1", value: "a1" },
									{ label:"option 2", value: "a2" }]
}

Related sample: 02_form/01_init.html
API Reference: Methods, properties, events

Back to top

richselect

Non-editable combo box.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • data - specifies select options of control.
    • id - (string,integer) the identification name of option.
    • value - (string) the text label of option.
  • id - (string, integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • label - (string) the text label of control.
  • labelAlign - (left, right or center) the alignment of label within the defined width.
  • labelWidth - (integer) the width of label.
  • options - specifies select options of control. A simpler alternative to data parameter.
    • label - (string) the text label of option.
    • value - (string, integer) the value (id) of option.
  • value - (string, integer) the id of initial option.
  • width - (integer) the width of area assigned to control.
  • yCount - (integer) specifies the number of options.
  • iconCss - (string or boolean) defines a css class for the control icon. By default - “dhx_list_icon” . The value false allows you to hide the icon.
  • iconWidth - (integer) the width of the control icon.
//using 'data' parameter to specify select options
{ view:"richselect",id: "list2", label: 'richselect', value:1, yCount:"3", data:[
									   { id:1, value:"One"   }, 
									   { id:2, value:"Two"   }, 
									   { id:3, value:"Three" }
]}
//or
//using 'options' parameter to specify select options
{ view:"richselect",id: "list2", label: 'richselect', value:"1", yCount:"3", options:[
									   { value:1, label:"One"   }, 
									   { value:2, label:"Two"   }, 
									   { value:3, label:"Three" }
]}

You can refer to the inner pop-up list through $$(“richselectId_list”):

dhx.ui({ view:"richselect",id: "myRichselect", options:[
					{ value:1, label:"One"   }, 
					{ value:2, label:"Two"   }, 
					{ value:3, label:"Three" }]
})
var items=$$('myRichselect_list').dataCount();
alert(items);

Related sample: 02_form/01_init.html
API Reference: Methods, properties, events

Back to top

segmented

A holistic panel contained several buttons (two and more).

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • multiview - (boolean) allows to link tabbar with multiview. Default value - false.
  • options - defines individual segments (buttons).
    • label - (string) the text label of segment.
    • value - (string, integer) the identification name of segment.
  • popup - (id, pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • width - (integer) the width of area assigned to control.
{view:"segmented", multiview:true, options:[
				 { value:1, label:"Section A" }, 
				 { value:2, value:"Section B" }, 
				 { value:3, value:"Section C" }]
}

API Reference: Methods, properties, events

Back to top

select

A dropdown list.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • disabled - (boolean) disables the field. Once set, the field becomes grey. By default - false.
  • id - (string, integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • options - specifies select options of control.
    • label - (string) the text label of option.
    • selected - (boolean) defines whether or not an element will be selected initially.
    • value - (string, integer) the value of option.
  • width - (integer) the width of area assigned to control.
{view:"select",id: "list2", options:[
				   { value:1, label:"One" }, 
				   { value:2, value:"Two", selected:"true" }, 
				   { value:3, value:"Three" }]
}

API Reference: Methods, properties, events

Back to top

slider

A small bar that slides along a visible line.

  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • label - (string) the text label of control.
  • max - (integer) the maximum value of the scale. Default value - 100. The parameter is ignored if options is set.
  • min - (integer) the minimum value of the scale. Default value - 0. The parameter is ignored if options is set.
  • step - (integer) the step of the scale. Default value - 1. The parameter is ignored if options is set.
  • options - sets the steps of the bar. The value returned by the slider is rounded to the nearest step.
    • label - (string) the text label of step.
    • value - (string, integer) the value of step.
  • slide - (function) the function which will be executed on sliding motion.
  • value - (string, integer) the initial value of control.
{ view:"slider", label:"Level", value:2, name:"s1", options:[
					{value:0, label:"none"},
					{value:1, label:"mild"},
					{value:2, label:"moderate"},
					{value:3, label:"severe"}
]}
//or
{ view:"slider", label:"Level", value:2, name:"s1", max:50, min:10, step:10}

So, you have 2 variants to set scale items:

  1. Through the options parameter;
  2. Through the max, min, step parameters. In this case the related 'options' (with empty labels) are created automatically.

Related sample: 02_form/09_slider.html
API Reference: Methods, properties, events

Back to top

tabbar

A panel contained several buttons.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • multiview - (boolean) allows to link tabbar with multiview. Default value - false.
  • options - defines individual tabs (buttons).
    • label - (string) the text label of element.
    • src - (URL) the path to image that will be shown when a tab is not selected.
    • srcSelected - (URL) the path to image that will be shown when a tab is selected. If you don't define this property, tab will have the same image at both states.
    • value -(string,integer) the value of element.
  • popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • selected - (string,integer) value of the tab which will be selected initially.
  • width - (integer) the width of area assigned to control.
{view:"tabbar",id:"tabbar1", inputWidth:100,selected:"tabbar_2", align:"center", options: [   
                            	    { label: 'Games', src: '../multiview/images/tabbar/games.png', value: 'tabbar_1'},
                            	    { label: 'Video', src: '../multiview/images/tabbar/video.png', value: 'tabbar_2'},
                            	    { label: 'Music', src: '../multiview/images/tabbar/music.png', value: 'tabbar_3'}]
}

API Reference: Methods, properties, events

Back to top

text

A text input field with a label.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • label - (string) the text label of control.
  • labelAlign - (left, right or center) the alignment of label within the defined width.
  • labelWidth - (integer) the width of label.
  • labelPosition - (left, right) the position of label relative to input field.
  • maxLength - (integer) the maximum number of characters that a user can enter in the field.
  • placeholder - (string) sets text of a placeholder ( text which is displayed when the field is empty and not focused).
  • popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • readonly - (boolean) makes the field read-only, i.e. disallows users to enter data. By default - false.
  • type - (password, text) sets the type of field. By default - text.
  • value - (string, integer) the initial text in the field.
  • width - (integer) the width of area assigned to control.
{view:"text",label:"text", type:"password", align:"left"}

Related sample: 02_form/01_init.html
API Reference: Methods, properties, events

Back to top

textarea

A multi-line text input.

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • inputHeight - (integer) the height of control.
  • inputWidth - (integer) the width of control.
  • popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • value - (string, integer) the initial value of control.
  • width - (integer) the width of area assigned to control.
{view:"textarea",label:"type here", align:"left"}

Related sample: 02_form/01_init.html
API Reference: Methods, properties, events

Back to top

toggle

An element area that contains label and a toggle (left and right buttons).

  • align - (left, right or center) the alignment of component inside designated area.
  • batch - (string) assigns a group to control. The parameter is used by showBatch() method for manipulating group visibility.
  • css - (css class) additional css class for parent <div> container.
  • id - (string, integer) identification name. Used for referring to component.
  • inputWidth - (integer) the width of control.
  • label - (string) the text label of control.
  • labelAlign - (left, right or center) the alignment of label within the defined width.
  • labelPosition - (left, right) the position of label relative to toggle.
  • labelWidth - (integer) the width of label (default value - 80).
  • options - defines individual tabs (buttons).
    • label - (string) the label of tab.
    • value - (string, integer) the value of tab.
    • width - (integer) the width of tab.
  • popup - (id, pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
  • width - (integer) the width of area assigned to control.
{view:"toggle", label:"toggle", labelPosition:"left", labelWidth:60, options:[{value:1, label:"yes"},
                                                                              {value:2, label:"no"}]
}
//or, if you want to use simplified version of the parameter 'options' 
{view:"toggle", label:"toggle", labelPosition:"left", labelWidth:60, options:["yes", "no"]}
//in this case 'label' and 'value' values will agree

Related sample: 02_form/01_init.html
API Reference: Methods, properties, events

Back to top