# Widget

The `Widget` control enables integration of JavaScript libraries into Wisej.NET applications. It loads custom JavaScript and CSS libraries at runtime, allowing you to utilize and containerize custom controls.

These integrated controls can be configured with server-side resources and trigger server-side events.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Server Communication

Wisej.NET provides a streamlined infrastructure for client-server messaging between individual controls.

#### Client to Server

Use the `fireWidgetEvent` method to send messages from client to server by attaching to the client-side widget event:

{% tabs %}
{% tab title="JavaScript" %}

```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);
}
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Check the Browser console for important messages when debugging the `Widget`.
{% endhint %}

The application routes received event data to the corresponding server-side control's `WidgetEvent` handler:

{% tabs %}
{% tab title="C#" %}

```csharp
// 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;
    }
}
```

{% endtab %}
{% endtabs %}

#### Server to Client

Use the `Instance` dynamic member to send messages to the client-side widget.

First, define a function in your client-side `Widget.InitScript`:

{% tabs %}
{% tab title="JavaScript" %}

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

{% endtab %}
{% endtabs %}

Then call this method using `CallAsync` or `Eval` from the server-side instance:

{% tabs %}
{% tab title="C#" %}

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

// or

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

{% endtab %}
{% endtabs %}

## Advanced

### JavaScript Widget

| Item             | Description                                                                                                         |
| ---------------- | ------------------------------------------------------------------------------------------------------------------- |
| Class name       | "wisej.web.Widget"                                                                                                  |
| Theme appearance | "widget", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                               |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js) |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/docs/controls/content/widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.