Provides a generic widget that can use most third party javascript widgets.

The Wisej Widget control is the key to integrating the rest of the JavaScript world into a Wisej application. The Widget control allows developers to load custom JavaScript and CSS libraries into their Wisej application at runtime to utilize and containerize custom controls.

The custom-integrated controls are able to be configured and populated from server-side resources and fire server-side events.

For a full list of properties, methods and events see the API documentation.


Server Communication

Delegating communication between a client and server for individual controls on a webpage can be a cumbersome task. Wisej makes this easy by providing the infrastructure to communicate the messages with a few calls.

Client to Server

When working with JavaScript widgets, everything is handled on the client. If you want to send a message to the server you can do so by attaching to the client-side widget event and calling fireWidgetEvent:

// Processes the client-side widget initialization.
this.init = function(options) 
    // retain a reference to 'this' context.
    var me            = this;
    options.onItemTap = function itemTap(event, inst) {
        me.fireWidgetEvent("itemTap", event.target.getAttribute("data-text"))
    // simple integration of the MobiScroll JavaScript library.
    mobiscroll.optionlist("#demo", options);

When debugging the Widget, make sure to check the Browser console for important messages.

After the Wisej application receives the event data, it delegates it to the corresponding server-side control's WidgetEvent handler, if one exists.

// Processes events from the client-side widget.
private void widget1_WidgetEvent(object sender, WidgetEventArgs e)
	switch (e.Type)
		case "itemTap":

		case "scroll":
			AlertBox.Show($"Scrolled: {e.Data.scrollValue}");

Server to Client

Sending a message to the client-side widget is easy using the Instance dynamic member.

Create a function in your client-side Widget's InitScript:

// Adds two numbers together.
this.addNumbers = function(num1, num2) 
    return num1 + num2;

Then you, can call this method from the server-side Widget instance:

var result = await this.widget1.CallAsync("addNumbers", 1, 2);


    (result) => { AlertBox.Show(result.ToString()); });


JavaScript Widget


Class name


Theme appearance

"widget", see Themes.

Source Code

Last updated