Jui Controls (jQuery UI)

Jui controls are the PRADO port of the standard jQuery UI widgets. They can be used as standard Active Controls, but will automatically load the needed jQuery-UI javascript libraries.

Options

The Options property of PRADO Jui controls is used to pass options to the underlying javascript object. Each subproperty set on Options will be translated to a javascript property added to the object. The complete list of options available for each widget is availble at jQuery-UI's API Documentation.

Example

jQuery-UI's Resizable adds an handle to a target element making it resizable. Its PRADO counterpart is TJuiResizable. Resizable offers an aspectRatio property to constrain the aspect ratio of the target element. The same property can be applied to TJuiResizable as a subproperty of the Options property:

<com:TJuiResizable
    ID="resize1"
    Options.aspectRatio="true"
    // Additional options being set
    Options.maxHeight="250"
    Options.maxWidth="350"
    Options.minHeight="150"
    Options.minWidth="200"
 />

Events

jQuery-UI widgets offers a lot of events that PRADO can hook up and trasmit to the serverside using a callback request. Event available for PRADO Jui controls inherits their names from their jQuery-UI counterparts, prefixed with "On". Jui controls doesn't make use of the AutoPostback property anymore, but only triggers a callback when an event handler is associated to the corresponding event.

Example

jQuery's Draggable allows a target element to the moved using the mouse. Its PRADO counterpart is TJuiDraggable. Draggable exposes two useful events: start and stop, that gets triggered respectively when the element starts to move and when the movement stops. TJuiDraggable exposes these same events:

<com:TJuiDraggable
    ID="drag1"
    OnStart="drag1_start"
    OnStop="drag1_stop"
 />

PRADO Jui interactions controls

Jui interactions adds basic mouse-based interactions to elements like moving, resizing or sorting. PRADO Jui interactions controls applies there interactions to a TActivePanel For informations of the specific options of each interaction, follow jQuery-UI Interaction API Documentation for the specific interaction.

  • TJuiDraggable is an element that can be moved using the mouse.
  • TJuiDroppable is an area where TJuiDraggable elements can be released.
  • TJuiResizable is an element that cna be resized using the mouse.
  • TJuiSelectable displays a list of elements that can be selected individually.
  • TJuiSortable displays a list of elements that can be selected individually.

PRADO Jui widgets controls