Widget

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.

Features

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:

JavaScript

// 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.

C#

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

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

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:

JavaScript

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

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

C#

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

or

this.widget1.Eval($"this.addNumbers({1},{2});", 
    (result) => { AlertBox.Show(result.ToString()); });

Advanced

JavaScript Widget

Item	Description
Class name	"wisej.web.Widget"
Theme appearance	"widget", see Themes.
Source Code	https://github.com/iceteagroup/wisej-js