DropDown
From Morfik Wiki
The Drop-down control can be used as the building block for creating advanced controls such as Menus, Accordion and Tab controls, to name a few.
| Key properties: | |
| Key events: | ||
| Server Code: | DropDown = Class(Container) | |
| Browser Code: | DropDown = Class(TCustomControl) |
Graphical States
| States | Appearance | Description |
|---|---|---|
| Normal | 
| The default state for the control when no other state is active. |
| Mouseover | 
| This view is displayed when the user moves the cursor over the control |
| Disabled | This view is displayed when the control's ability to receive input is disabled. | |
| Mouse Down | 
| |
| Dropped | 
|
Learn more about Morfik Styles and Themes.
Properties
| Property | Description |
|---|---|
| Alignment | The Alignment property is used to align the Caption text with the left, right, or center of the Control. |
| Arrow Icon |
This property describes various attributes of an arrow icon that appears near the right-hand edge inside a dropdown control. |
| Border Color | The BorderColor property specifies the color that should be used for drawing a rectangular border around the Control. Note: the border will not be visible unless the BorderStyle and BorderWidth properties are also set. |
| Border Sides | The BorderSides property specifies the parts of a control's border that are displayed. |
| Border Style | The BorderStyle property of the control defines how and if a border will be drawn around the control. |
| Border width | The Border Width property specifies the line width used to draw the rectangular border around the Control. Note: the border will not be visible unless the BorderColor and BorderStyle properties are also set. |
| Button Style | The ButtonStyle property specifies the style of DropDown control. |
| Caption | Caption is the most frequently used property of a Text orientated control as it allows setting and reading of the content (all the text) that is displayed by the control. This property can be bound to a database table field as to automatically display its contents and allow editing of them. |
| Color | The Color property specifies the background color of the Control. |
| Cursor | The Cursor property, if set, causes the appearance of the mouse cursor to change as it moves over the Control. |
| Drop On Mouse Over | The DropOnMouseOver property determines if the user can access the popup part of DropDown by clicking on by moving mouse cursor over DropDow control. |
| Enabled | If the Enabled property is set to false, the Control's state (ticked or unticked) cannot be changed by the user. Note For Timer Control: This property controls whether the Timer event will be triggered at the time interval specified in the Interval property. If the Enabled property is set to false, the Timer event will not be triggered. |
| Font | The Font property (and its sub-properties Color and Name) is used to indicate which font should be used for drawing the text in the Control. |
| Height | The Height property specifies the vertical extent of the Control. Note: if the CanGrow or CanShrink properties are set, the actual height of the Control at run time may be different. |
| Hint | The Hint property, if set, specifies the text of a tooltip that is displayed when the user moves the cursor over the control. |
| Horizontal Placement | The HorizontalPlacement property, if set, governs how the Control adjusts its size and position in response to changes in the horizontal dimensions of its parent. |
| Hyperlink | The IsHyperlink property, when set to true, turns the Caption of the Control into a hyperlink. This is most often used when the Control is bound to a hyperlink field. |
| Icon | The Icon property allows the developer to specify an image to be displayed in the Control. Use the Icon.Picture subproperty to specify the image file. Use the Icon.HorzAlign, Icon.HorzMargin, Icon.VertAlign, Icon.VertMargin subproperties to specify the position of the image within the Control. |
| Layout | The Layout property determines the way child controls are arranged inside the container. |
| Left | The Left property specifies the horizontal position of the Control in the form. |
| Margins | The Margins property clears an area around control (outside its border). |
| Name | The Name property specifies the identifier used to reference the control from browser- or server-side code. |
| Opacity | The Opacity property determines the extent to which the Control obscures any controls placed in its background. A value of 0 means that background controls are fully visible, whereas a value of 100 means that background controls are completely obscured. |
| Padding | The Padding property specifies the space between the border and the content of the editor. |
| Popup Alignment | The PopupAlignment property adjusts the position of the popup part relative to the Dropdown control. |
| Popup Position | The PopupPosition property specifies the position of the popup part relative to the Dropdown control. |
| Shared Style | The SharedStyle property can be used to force several controls always have the same appearance. |
| Tag | The Tag property is used to store user data that is associated with the control. |
| Top | The Top property specifies the vertical position of the Control in the form. |
| Vertical Placement | The VerticalPlacement property, if set, governs how the Rectangle adjusts its size and position in response to changes in the vertical dimensions of its parent. |
| Visible | The visible property is used to make controls visible or invisible. Invisible controls are frequently used to allow for easy access to information from a database table field, if the control is bound to one. |
| Width | The Width property specifies the horizontal extent of the Form/control. |
Events (browser-side)
| Event | Description |
|---|---|
| On After Drop | This event is fired by a DropDown control within the browser after the control reveals its hidden container. |
| On Before Drop | This event is fired by a DropDown control within the browser before the control reveals its hidden container. |
| On Blur Event | This event is fired within the browser when a control loses focus either by the pointing device or by tabbing navigation. |
| On Click | The most commonly used event for a TextLabel control is the OnClick event, which should be handled to execute whatever action is intended when a control is clicked. |
| On Click | This event is fired when the user clicks on a control within the browser. |
| On Double Click | This event is fired when the user clicks on a control within the browser. |
| On Focus | This event is fired within the browser when a control receives focus either by the pointing device or by tabbing navigation. |
| On Hyperlink Click | This event is fired in the browser just after a hyperlink is clicked and before the requested navigation is carried out. |
| On Key Down | This event is fired within the browser when a key is pressed down. |
| On Key Up | This event is fired within the browser when a key is released. |
| On Mouse Down | This event is fired within the browser when the mouse button, or any other pointing device button, is pressed while it is over a control. On a PC-based mouse, it specifically relates to the left-hand mouse button being depressed. |
| On Mouse Out | This event is fired when the mouse pointer, or any other pointing device button, is moved out of the region defined by a control. |
| On Mouse Over | This event is fired when the mouse pointer or any other pointing device is over (within the region defined by) a control. |
| On Mouse Up | This event is fired within the browser when the mouse button, or any other pointing device button, is released over a control. On a PC-based mouse, it specifically relates to when the left-hand mouse button is being released. |
| On After Pushed Or Pulled | This event is fired within the browser after the position of a control has changed in response to a change in the content of a sibling control. |
| On Before Pushed Or Pulled | This event is fired within the browser before the position of a control is changed in response to a change in the content of a sibling control. |
Events (server-side)
| Event | Description |
|---|---|
| On After Print | This event is fired on the server by a Control after its HTML (or in the case of Report generation, PDF) content is generated. |
| On Before Print | This event is fired by a control on the server before control’s HTML (or in the case of Report generation, PDF) content is generated. |
| On Print Style | This event is fired on the server to allow for CSS style changes when the HTML representation of a control is being constructed. |
Remarks
Run-time behavior
Set Down property to True or call Drop method to open drop-down section of a DropDown control programmaticly. Set Down property to False or call CloseDropped event to close drop-down section of a DropDown control.
- Syntax
FX Code
DropDown1.CloseDropped;| BX Code |
|---|
DropDown1.CloseDropped |
| CX Code |
|---|
DropDown1.CloseDropped(); |
Set Drop On Mouse Over property to True to make DropDown control to open when hovering mouse over it and closing when mouse leaves DropDown's control client area.