Skip to main content

wxBase

Namespace: Wisej.Web.Ext.Webix

Assembly: Wisej.Web.Ext.Webix (4.1.0.0)

The wxBase class is the foundation of all Webix visual controls.

public abstract class wxBase : Widget

Each derived control wraps one Webix view. The Options object is the Webix configuration passed to webix.ui() when the widget is created in the browser; the wrapper adds the view and container fields and keeps the Webix view sized to fit the control.

Use the Instance property to call the methods of the Webix view and to attach server-side handlers to its events: the handler added to Instance.onItemClick is attached to the Webix event onItemClick.

Example:

The following example creates a DataTable, adds a row calling a method of the Webix view and handles the Webix onItemClick event on the server.

var table = new DataTable(new
{
	select = "row",
	columns = new object[]
	{
		new { id = "title", header = "Title", fillspace = true },
		new { id = "year", header = "Year", width = 80 }
	},
	data = new[]
	{
		new { id = 1, title = "The Godfather", year = 1972 },
		new { id = 2, title = "Pulp Fiction", year = 1994 }
	}
});
table.Dock = DockStyle.Fill;
this.Controls.Add(table);

// call a method of the Webix view.
table.Instance.add(new { id = 3, title = "Alien", year = 1979 });

// handle a Webix event: for a datatable the event data contains the clicked row and column.
table.Instance.onItemClick += new WidgetEventHandler((s, e) =>
{
	AlertBox.Show($"Clicked row {e.Data.row}, column {e.Data.column}.");
});

Constructors​

Instance member wxBase(className, options)​

Constructs a new instance of the wxBase class.

NameTypeDescription
classNameStringThe name of the Webix view to create, i.e. "datatable" or "list". It is assigned to the view field of the Webix configuration.
optionsObjectInitial set of options: an anonymous object, a dynamic object or a JSON string. It can be null.

See demo at: https://webix.com/demos/

Throws:

Example:

The following example derives a control that wraps the Webix list view, which is not included in the extension.

public class List : wxBase
{
	public List(object options) : base("list", options)
	{
	}
}

var list = new List(new
{
	template = "#title#",
	select = true,
	data = new[]
	{
		new { id = 1, title = "Inbox" },
		new { id = 2, title = "Sent" }
	}
});
this.Controls.Add(list);

Instance member wxBase(className, html, options)​

Constructs a new instance of the wxBase class using custom HTML as the container of the Webix view.

NameTypeDescription
classNameStringThe name of the Webix view to create, i.e. "datatable" or "list". It is assigned to the view field of the Webix configuration.
htmlStringThe HTML markup to place inside the control. Its first element becomes the container of the Webix view.
optionsObjectInitial set of options: an anonymous object, a dynamic object or a JSON string. It can be null.

The html is assigned to the inner element of the control and the Webix view is created inside the first element of the markup.

Throws:

Example:

The following example derives a control that creates the Webix list view inside a custom element.

public class FramedList : wxBase
{
	public FramedList(object options)
		: base("list", "<div class=\"framed-list\"></div>", options)
	{
	}
}

var list = new FramedList(new { template = "#title#" });
this.Controls.Add(list);

Properties​

Static member Culture​

CultureInfo: Returns or sets the culture for all the Webix widgets in the session.

The name of the culture is passed to webix.i18n.setLocale() when a widget is created in the browser. It also replaces the %culture% (i.e. "de-DE") and %locale% (i.e. "de") placeholders in the package URLs declared in the configuration file Wisej.Web.Ext.Webix.json.

The value is stored in the session and defaults to CurrentCulture; setting it to null restores the default. Changing it recreates all the Webix widgets that exist in the session.

Example:

The following example switches all the Webix widgets in the session to German.

wxBase.Culture = new CultureInfo("de-DE");

Instance member Options​

Object: Returns or sets the configuration options of the Webix view.

The property accepts an anonymous object, a dynamic object or a JSON string. Anonymous objects and JSON strings are converted to a dynamic object, therefore the fields can be read and changed after the assignment.

The field names are the names of the Webix configuration properties and are case sensitive. Changes to first-level fields are detected automatically; after changing a nested field call Update.

A string field with the format "(args)=>name" is replaced on the client with the JavaScript function with the same name declared in WidgetFunctions.

Example:

The following example shows the different ways to set and change the options of a Chart.

// assign an anonymous object.
this.chart.Options = new
{
	type = "bar",
	value = "#sales#",
	xAxis = new { template = "#year#" }
};

// or assign a JSON string.
this.chart.Options = "{ \"type\": \"bar\", \"value\": \"#sales#\", \"xAxis\": { \"template\": \"#year#\" } }";

// first-level fields are updated automatically.
this.chart.Options.type = "line";

// nested fields need a call to Update().
this.chart.Options.xAxis.title = "Year";
this.chart.Update();

Static member Theme​

String: Returns or sets the theme for all the Webix widgets in the session.

The value is the name of a Webix skin and replaces the %theme% placeholder in the package URLs declared in the configuration file Wisej.Web.Ext.Webix.json, i.e. %root%/edge/skins/%theme%.css. When the value is null or empty, the default theme declared in the configuration file is used.

The value is stored in the session. Changing it updates all the Webix widgets that exist in the session.

Example:

The following example selects the Webix "material" skin before the first Webix widget is created.

wxBase.Theme = "material";

var calendar = new Calendar();
this.Controls.Add(calendar);

Instance member WidgetEvents​

WidgetEventHandler[]: Returns or sets the JavaScript handlers for the events of the Webix view. (Default: null)

Each handler is compiled into a JavaScript function that receives the argument e and is assigned to the Webix configuration, before the view is created, as the field named "on" followed by the capitalized Name, i.e. itemClick becomes onItemClick.

The handlers run in the browser only. To handle an event of the Webix view on the server, attach a handler through Instance instead, i.e. table.Instance.onItemClick += new WidgetEventHandler(handler).

Assign this property before the widget is created in the browser.

Example:

The following example declares a client-side handler that is assigned to the onItemClick field of the configuration.

this.table.WidgetEvents = new[]
{
	new wxBase.WidgetEventHandler
	{
		Name = "itemClick",
		Source = "console.log('Clicked row ' + e.row);"
	}
};

Instance member WidgetFunctions​

WidgetFunction[]: Returns or sets the JavaScript functions used by the widget. (Default: null)

Each function is added to the client widget under its Name; the Source is the body of the function.

A function can also be assigned to a field of the Options that expects a JavaScript function by setting the field to one of these strings:

  • "()=>name" or "(a,b)=>name": the field receives the function; the names in parentheses are the arguments that the body can use.
  • "()=>name()" or "()=>name(1,2)": the function is executed and the field receives the returned value.

Assign this property before the widget is created in the browser.

Example:

The following example uses a JavaScript function as the template of a column of a DataTable.

var table = new DataTable(new
{
	columns = new object[]
	{
		new { id = "title", header = "Title", fillspace = true },
		new { id = "price", header = "Price", width = 100, template = "(obj)=>formatPrice" }
	},
	data = new[]
	{
		new { id = 1, title = "Keyboard", price = 49.9 },
		new { id = 2, title = "Monitor", price = 219.0 }
	}
});
table.WidgetFunctions = new[]
{
	new wxBase.WidgetFunction
	{
		Name = "formatPrice",
		Source = "return '$ ' + obj.price.toFixed(2);"
	}
};
this.Controls.Add(table);

Instance member WidgetTemplates​

WidgetTemplate[]: Returns or sets the templates used by the widget. (Default: null)

Each template is added to the page as a script element with the id and the type specified in Id and Type. A Webix template option can load the content of the element using the syntax "html->id". Assign this property before the widget is created in the browser.

Example:

The following example registers a template and uses it to render the items of a GroupList.

this.list.WidgetTemplates = new[]
{
	new wxBase.WidgetTemplate
	{
		Id = "movieTemplate",
		Template = "<b>#value#</b> <span style='float:right'>#year#</span>"
	}
};
this.list.Options.templateItem = "html->movieTemplate";

Methods​

Protected member Dispose(disposing)​

Disposes of resources.

ParameterTypeDescription
disposingBoolean

Static member Notify(message, type, displayTime)​

Displays a toast notification in the browser with the given message.

ParameterTypeDescription
messageStringThe text to display.
typeStringThe type of message, i.e. "info", "warning", "error" or "success".
displayTime optionalInt32Specifies the duration of the toast in milliseconds. The default is 500.

The call is forwarded to the client function DevExpress.ui.notify(message, type, displayTime), therefore it works only when that function is available in the page.

Example:

The following example shows a success notification for two seconds.

wxBase.Notify("The record has been saved.", "success", 2000);

Protected member OnWebRender(config)​

Wire the client config to the server.

ParameterTypeDescription
configObject

Inherited By​

NameDescription
BarcodeThe Barcode widget represents text values in a machine-readable format by varying the widths and spacing of parallel lines. The widget uses Canvas for lines rendering.
CalendarIt is a handy and fully interactive tool to pick the necessary time and date when filling a form. The dedicated timepicker allows setting the necessary time that will be displayed below the calendar area.
ChartChart is a UI-related component that helps present data in different graphic figures like colored columns, pie pieces or lines. Like all the data-presenting components it takes initial data in various formats.
ChatChat is a new Webix tool that allows users creating group and private chats. Live updates make it possible to communicate with others in real time.
ColorBoardUI-related colorboard is a tool to get the hex code of a color that you are going to use for styling. By default, colors are presented in a rainbow-like manner. The detalization level you set manually.
ColorPickerColorpicker allows for selecting a color from the dedicated colorboard that is initialized on clicking its input field.
ColorSelectColor Selector allows selecting an arbitrary color. Can be used standalone or as a popup of ColorPicker.
DashboardWebix Dashboard is a precise but flexible widget that will help you to build an easily configurable web application.
DataTableDataTable is a grid widget that presents data in rows and columns and supports sorting, filtering, editing and selection of rows and cells.
DateRangeWebix DateRange includes several calendars and allows selecting a date range. You can also pick the time by using the timepicker at the bottom of the widget.
DiagramWebix Diagram is a widget for building and displaying diagrams made of blocks connected by links, such as organization charts and flowcharts.
DocumentManagerDocument Manager is a complex widget based on File Manager.
ExcelViewerExcelViewer is an extension tool intended for viewing Excel files.
FileManagerFile Manager is a ready-made solution for working with a file system through a convenient web interface.
FilterWebix Filter is a handy interactive tool for filtering complex datasets. The Filter widget allows you to filter data, set the list of rules (depending on data type) or exclude some data from filtering.
GageThe Gage widget allows visualizing alteration of data values with the help of color representation of the displayed value.
GanttWebix Gantt is developed to meet the requirements of project management.
GeoChartThe GeoChart widget displays information about countries, regions or states according to the provided data with the help of Webix and Google Map API.
GroupListUI-related grouplist inherits from list and allows presenting data in groups. Data grouping is hierarchical, which means that any group item can start its own group.
KanbanWebix Kanban board is a tool that is intended for viewing work in progress and controlling the flow of work.
PDFViewerPDFViewer is a tool for displaying the content of PDF files on the screen.
PivotPivot is a powerful solution dedicated to work with large data volumes.
QueryQuery is designed to extend the variety of the Webix widgets. The widget contains a built-in Filter for creating and combining filters of any complexity.
RangeChartRangeChart is a component that allows presenting data in a detailed way. It can be useful if you work with big amounts of data and need to display some particular data parts.
ReportManagerReport Manager is designed to simplify the process of managing reports.
SchedulerWebix Scheduler is a modern solution for time-management and scheduling. The widget is designed to replace its predecessor - Mobile Scheduler and perfectly works on both desktop and mobile platforms.
SidebarWebix Sidebar is a Tree-based component which is used for creating menus with hierarchical structure.
SideMenuThe SideMenu widget inherits from Window and can be bound to any side of the screen (top, bottom, right, left).
SpreadsheetWebix SpreadSheet is a powerful component for creating tables and performing various operations on their data and appearance.
TimeBoardWebix TimeBoard is another control for time management designed to make the process of time selection even more precise and handy. It can be used standalone or in tandem with DatePicker.
TimeLineTimeLine widget is designed for visualizing data in a chronological order and creating scalable infographics. You can customize every aspect of TimeLine to fit your purposes: change item text, add colors to labels and scale elements.
TreeTree is a widget that presents hierarchical data as a tree of nodes that can be expanded, collapsed and selected.
TreeMapUI-related TreeMap inherits from view and allows visualizing hierarchical structures in a space-limited way - as a set of nested rectangles. It takes most part of API from TreeStore.
TreeTableUI-related TreeTable inherits from view. Being a hybrid between DataTable and Tree, it shares a number of their properties and methods.
UnitListUnitList presents data in groups derived from initial non-hierarchical dataset. Data items are sorted and then united by common values.
UserManagerUser Manager is a brand-new complex solution design to manage user access rights. This tool allows assigning various permissions to a person directly or by combining them into roles.

Implements​

NameDescription
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable