LogoLogo
HomeNewsSupportVideos
  • Introduction
  • Getting Started
  • What's new in 4.0
    • Known Issues
    • .NET Core Designer
    • Managed Graphics
    • Fluent Markup
    • Markdown Support
    • Upgrade from 3.x
  • Releases
    • What's new in 4.0
    • What's new in 3.5
    • What's new in 3.2
      • View Builder
      • Validation Rules
      • Enhanced Font Support
      • Design-Time Debug
    • What's new in 3.1
    • What's new in 3.0
      • FAQs
      • Update Existing Projects
      • Multi Targeting
      • Visual Studio Designer
      • Referencing Assemblies
      • Docker Support
      • Troubleshooting
      • Deployment
    • What's new in 2.5
    • What's new in 2.2
    • What's new in 2.1
    • What's new in 2.0
    • Upgrade from 1.x
  • Getting Started
    • New Project
    • Templates
    • Troubleshooting
    • License Activation
    • FAQ
    • API
    • Hybrid
    • Deployment
    • Theme Builder
  • Concepts
    • Startup
    • Configuration
    • Load Balancing
    • Designer
    • Layouts
    • Client Profiles
    • Tab Order
    • Compression
    • Embedded Resources
    • Modal Workflow
    • Localization
    • RightToLeft
    • Background Tasks
    • Real Time Web Applications
    • JavaScript
    • JavaScript Object Model
    • Security
    • Synchronization
    • Session Management
    • Theming
    • Dependency Injection
    • Application Switches
    • Visual Studio Code
  • Controls & Components
    • General
      • Application
      • AutoSizing
      • AutoScroll
      • AutoScaling
      • Accessibility
      • Colors & Fonts
      • Embedded Tools
      • Events
      • Touch Events
      • Images
      • Labels
      • ToolTips
      • Data Binding
      • Common Properties
      • Custom Painting
      • Move & Resize
      • Drag & Drop
      • Validation
      • User Data
      • Responsive Properties
      • VB.NET Extensions
    • Common Dialogs
      • FolderBrowserDialog
      • ColorDialog
      • OpenFileDialog
      • SaveFileDialog
    • Editors
      • TextBox
        • TagTextBox
        • MaskedTextBox
        • TypedTextBox
      • DateTimePicker
      • MonthCalendar
      • TimeUpDown
      • DomainUpDown
      • NumericUpDown
      • TrackBar
    • Buttons
      • Button
      • SplitButton
      • CheckBox
      • RadioButton
    • Containers
      • Page
      • Form
      • Desktop
      • Panel
      • FlexLayoutPanel
      • FlowLayoutPanel
      • TableLayoutPanel
      • GroupBox
      • Accordion
      • TabControl
      • UserPopup
      • UserControl
      • ToolBar
      • StatusBar
      • SplitContainer
      • SlideBar
    • Lists & Grids
      • ComboBox
        • UserComboBox
        • TreeViewComboBox
        • ListViewComboBox
      • ListBox
        • CheckedListBox
      • TreeView
      • ListView
      • DataGridView
        • Column
        • TextBoxColumn
        • ButtonColumn
        • LinkColumn
        • ImageColumn
        • MaskedTextBoxColumn
        • DateTimePickerColumn
        • NumericUpDownColumn
        • CheckBoxColumn
        • ComboBoxColumn
      • DataRepeater
      • PropertyGrid
    • Extenders
      • Animation
      • ToolTip
      • ErrorProvider
      • Rotation
      • StyleSheet
      • JavaScript
    • Media
      • Audio
      • Video
      • FlashPlayer
    • Content
      • Label
      • LinkLabel
      • PictureBox
      • ScrollBars
      • Upload
      • AspNetPanel
      • ImageList
      • PdfViewer
      • ProgressBar
      • Spacer
      • Widget
      • WebBrowser
      • IFramePanel
      • HtmlPanel
      • Canvas
      • Shape
      • Line
    • Menus
      • MainMenu
      • MenuBar
      • MenuItem
      • LinkMenuItem
      • ContextMenu
    • Notifications
      • AlertBox
      • MessageBox
      • Toast
    • Other Components
      • Timer
      • BindingSource
      • BindingNavigator
      • DataSet
      • EventLog
      • MessageQueue
      • PerformanceCounter
Powered by GitBook
On this page
  • Features
  • Server Communication
  • Advanced
  • JavaScript Widget

Was this helpful?

Export as PDF
  1. Controls & Components
  2. Content

Widget

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

PreviousSpacerNextWebBrowser

Last updated 2 months ago

Was this helpful?

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.

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

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:

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

Check the Browser console for important messages when debugging the Widget.

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

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

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

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

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

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

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

Source code

"widget", see .

API documentation.
Themes
https://github.com/iceteagroup/wisej-js