Client Side Events

Creating event handlers in JavaScript

To handle a client-side event, create a JavaScript event handler function and assign its name to the respective script property of the control. The properties that contain the names of the JavaScript event handlers have the same name as the event with a Script suffix added, in the form of [EventName]Script. The signature of the handler should contain the sender and args parameters, where sender is always the control and args are the event arguments associated with the event. For each client-side event, there is a string property of the form [EventName]Script that specifies the respective JavaScript event handler function that should be called. In the Visual Studio Properties window, type in the name of the event handler function in the field of the respective event property, for example [EventName]Script = "onEventName".

Notification events

Notification events are raised to notify you that the user has performed some action e.g. itemClicked, dragStart, resizeEnd, close. The event arguments associated with notification events inherit Sys.EventArgs.

Validation events

Validation events let you approve or reject users actions. The event handler functions are expected to set the value of the Sys.CancelEventArgs cancel property accessible through the args parameter of the handler, either set_cancel(false) if an action should be accepted, or set_cancel(true) if it should be rejected. Such events are activeItemChanging, activeTabChanging and popupOpening. There are events raised when users start a certain interaction, for example resizeStart. When the user opens or closes a Window, the opening/closing event is raised to let you confirm the operation.

The following table presents all client side events for the controls included in the library, with their associated event arguments, the respective Script property and a short description:

Controls	Event	Event arguments	Script property	Description
Window, DockWindow	dragStart	WindowValidatingEventArgs	DragStartScript	Raised when the user starts to drag a control with the mouse.
Window, DockWindow	drag	WindowModifiedEventArgs	DragScript	Raised during a drag operation.
Window, DockWindow	dragEnd	WindowModifiedEventArgs	DragEndScript	Raised when the user finishes to drag a control with the mouse.
Window, DockWindow	resizeStart	WindowValidatingEventArgs	ResizeStartScript	Raised when the user starts to resize a control with the mouse.
Window, DockWindow	resize	WindowModifiedEventArgs	ResizeScript	Raised during a resize operation.
Window, DockWindow	resizeEnd	WindowModifiedEventArgs	ResizeEndScript	Raised when the user finishes to resize a control with the mouse.
Window, DockWindow	opening	WindowValidatingEventArgs	OpeningScript	Raised when a window is about to open.
Window, DockWindow	open	WindowEventArgs	OpenScript	Raised when a window has opened.
Window, DockWindow	closing	WindowValidatingEventArgs	ClosingScript	Raised when a window is about to close.
Window, DockWindow	close	WindowEventArgs	CloseScript	Raised when a window has closed.
Window, DockWindow	stateChanging	WindowStateValidatingEventArgs	StateChangingScript	Raised when the window state is currently changing.
Window, DockWindow	stateChanged	WindowStateEventArgs	StateChangedScript	Raised when the window state has changed
Window, DockWindow, TabPage, AccordionItem	frameLoaded	-	FrameLoadedScript	Raised when the internal iframe has finished loading.
Window, DockWindow, TabPage, AccordionItem, WindowHost, DockControl, TabControl, Accordion, Menu, Calendar, ColorEditor, ColorPicker, DatePicker, DateTimePicker, TimePicker, NumericUpDown, Rating	controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.
Window, DockWindow, TabPage, AccordionItem	headerClick	WindowEventArgs	HeaderClickScript	Raised when the user clicks the header of a control.
WindowHost, DockControl	windowChanged	WindowEventArgs	ActiveWindowChangedScript	Raised when the active window in host-based control is changed.
TabControl	tabChanging	TabChangingEventArgs	ActiveTabChangingScript	Raised when the active tab in tab control is about to be changed.
TabControl	tabChanged	TabChangedEventArgs	ActiveTabChangedScript	Raised when the active tab in tab control has changed.
Accordion	itemChanging	ItemChangingEventArgs	ActiveItemChangingScript	Raised when the expanded item in accordion control is about to be changed.
Accordion	itemChanged	ItemChangedEventArgs	ActiveItemChangedScript	Raised when the expanded item in accordion control has changed.
Menu	itemClicked	MenuItemEventArgs	ItemClickedScript	Raised when a menu item is clicked.
ColorEditor	controlSubmit	Sys.CancelEventArgs	ControlSubmitScript	Raised when the control's apply button is clicked.
Rating	valueChanging	ValueChangingEventArgs	ValueChangingScript	Raised when the control's value is changing.
ColorPicker, DatePicker, DateTimePicker, TimePicker, NumericUpDown, Rating	valueChanged	ValueChangedEventArgs	ValueChangedScript	Raised when the control's value has changed.
ColorEditor	colorChanged	ValueChangedEventArgs	ColorChangedScript	Raised when the control's selected color has changed.
Calendar	dateChanged	ValueChangedEventArgs	DateChangedScript	Raised when the control's date has changed.
Calendar	selectionChanging	ValueChangingEventArgs	SelectionChangingScript	Raised when the control's selection is changing.
Calendar	selectionChanged	ValueChangedEventArgs	SelectionChangedScript	Raised when the control's selection has changed.
Calendar	dateClick	CellEventArgs	DateClickScript	Raised when a control's date cell is clicked.
DatePicker, DateTimePicker, TimePicker, NumericUpDown	valueInvalid	ValueChangedEventArgs	ValueInvalidScript	Raised when the control's input value is invalid.
DatePicker, DateTimePicker, TimePicker, NumericUpDown	validationStateChanged	ValidationStateChangedEventArgs	ValidationStateChangedScript	Raised when the control's validation state has changed.
ColorPicker, DatePicker, DateTimePicker, TimePicker	popupOpening	PopupEventArgs	PopupOpeningScript	Raised when the control's popup is about to be opened.
ColorPicker, DatePicker, DateTimePicker, TimePicker	popupClosing	PopupEventArgs	PopupOpeningScript	Raised when the control's popup is about to be closed.

Examples

Disallow changing of the active tab in a TabControl.

JavaScript  Copy Code
function OnActiveTabChanging(sender, args) {     args.set_cancel(true); }

Handle the controlLoaded event of a WindowHost control to maximize the active window.

JavaScript  Copy Code
function OnHostLoaded(sender) {     sender.getActiveWindow().set_windowState(MindFusion.UI.Web.WindowState.Maximized); }

Handle Menu control's itemClick event.

JavaScript  Copy Code

function MenuItemClicked(sender, args) {     // get a reference to the clicked item.     var item = args.getItem();     if (item.get_rootItem().get_title() == "WindowHost" && item.get_title() == "Close all")     {         var host = $find("<%= WindowHost1.ClientID %>");         host.closeAll();     }     else     {         // postback the page to handle the server event.         sender.postback();     } }