Skip to main content

Webix

Webix is a JavaScript UI library from XB Software. It has a fast datatable, charts and a large set of standard views, plus Webix PRO "complex widgets" that are small applications in their own right: Pivot, Kanban, Gantt, Scheduler, Spreadsheet, File Manager, Document Manager, Report Manager, Query, Diagram, Chat and User Manager. The Wisej.Web.Ext.Webix extension wraps 36 of them as Wisej.NET controls.

A Webix dashboard on a laptop screen: task list, line, area, doughnut and bar charts and a calendar

Webix components in a dashboard (image: XB Software).

Installation​

dotnet add package Wisej-4-Webix

The package targets .NET Framework 4.8 and .NET 8 or later. After a rebuild, the widgets appear in the Visual Studio toolbox.

Webix PRO requires a licence from XB Software

Most widgets in this extension are Webix PRO components, which are commercial products of XB Software. You need a Webix PRO licence, which is separate from your Wisej.NET licence. Your Wisej.NET licence must also include the premium extensions. The Webix wrapper has no licenseKey setting: follow XB Software's instructions for deploying your licensed build, typically as a local or embedded source (see Deployment).

By default the scripts come from the Webix CDN, using the edge builds, which always point to the latest release: webix.js, plus the script and stylesheet of every PRO module. See Configuration to pin a version or to serve the files yourself.

Fix the default Webix configuration before going live

The default Wisej.Web.Ext.Webix.json of the 4.1 extension has two problems. Override it with your own file:

  1. Its CDN root is http://cdn.webix.com. Browsers block http: scripts on an https: page (mixed content), so the widgets never load on a secure site. Change the root to https://cdn.webix.com.
  2. Its default theme is webix, which makes the extension request edge/skins/webix.css. That file doesn't exist on the CDN: the default skin is built into webix.css. Set "theme" to a skin that does exist, such as material, mini, flat, compact, contrast, willow or dark, or set the static wxBase.Theme.
Wisej.Web.Ext.Webix.json
{
  "source": "cdn",
  "theme": "material",
  "sources": {
    "cdn": {
      "root": "https://cdn.webix.com",
      "packages": {
        "webix.js": "%root%/edge/webix.js",
        "theme.css": "%root%/edge/skins/%theme%.css",
        "kanban.js": "%root%/pro/edge/kanban/kanban.js",
        "kanban.css": "%root%/pro/edge/kanban/kanban.css"
      }
    }
  }
}
List only the modules you use

Every Webix widget loads every package in the configuration file, so with the default file even a simple Calendar downloads all twelve PRO modules. In your own file, keep webix.js, the theme, and the modules your application actually uses, as in the example above.

How the wrapper works​

Every widget derives from wxBase, which derives from the Wisej.NET Widget. Each class names the Webix view it creates. The wrapper adds view and container to your options and calls webix.ui(options), so Options holds exactly the configuration object that Webix's documentation shows for that view.

Wisej.NET classWebix view
DataTabledatatable
Pivotpivot
Kanbankanban
Schedulerscheduler
RangeChartrangechart
  • Webix properties go into Options.
  • Webix methods are called through Instance.
  • Webix events are attached with attachEvent. The wrapper adds the on prefix for you, so Instance.onItemClick in C#, or AddListener("itemClick", …), listens to Webix's onItemClick. See Events.
DataTable is also a .NET class

Wisej.Web.Ext.Webix.DataTable has the same name as System.Data.DataTable. In files that use both, qualify the name or add an alias, for example using wx = Wisej.Web.Ext.Webix;.

Getting started​

using wx = Wisej.Web.Ext.Webix;

var table = new wx.DataTable { Dock = DockStyle.Fill };

table.Options = new
{
    autoConfig = false,
    select = "row",
    columns = new object[] {
        new { id = "title", header = "Film", fillspace = true, sort = "string" },
        new { id = "year", header = "Released", width = 100, sort = "int" },
        new { id = "votes", header = "Votes", width = 100, sort = "int" }
    },
    data = new[] {
        new { id = 1, title = "The Shawshank Redemption", year = 1994, votes = 678790 },
        new { id = 2, title = "The Godfather", year = 1972, votes = 511495 },
        new { id = 3, title = "The Dark Knight", year = 2008, votes = 670016 }
    }
};

// https://docs.webix.com/api__link__ui.datatable_onitemclick_event.html
table.Instance.onItemClick += new WidgetEventHandler((s, e) =>
{
    AlertBox.Show("Clicked row " + e.Data.row);
});

this.Controls.Add(table);

// Later: ask the browser which row is selected.
var selectedId = await table.Instance.getSelectedIdAsync();

Widgets​

AreaClasses
DataDataTable, TreeTable, Tree, GroupList, UnitList, Filter, Query, Pivot
ChartsChart, RangeChart, GeoChart, TreeMap, Gage, Barcode
PlanningScheduler, Gantt, Kanban, Calendar, DateRange, TimeBoard, TimeLine
Documents and filesSpreadsheet, ExcelViewer, PDFViewer, FileManager, DocumentManager, ReportManager, Diagram
Layout and navigationDashboard, Sidebar, SideMenu
OtherChat, UserManager, ColorBoard, ColorPicker, ColorSelect
Complex widgets need a back end

File Manager, Document Manager, Report Manager, Chat, User Manager and some Gantt and Scheduler configurations expect a back-end service that follows XB Software's protocol, usually a REST API given in the options (url, api, …). The extension doesn't provide those services: implement them in your application, for example with ASP.NET Core minimal APIs, following the Webix documentation for each widget.

Themes and localization​

wxBase.Theme selects the Webix skin: the value becomes edge/skins/<theme>.css with the default configuration. Available skins include material, mini, flat, compact, contrast, willow and dark. wxBase.Culture sets the culture passed to the widgets. The default configuration loads no locale files: add Webix's locale scripts as packages if you need them. See Configuration.

wxBase.Theme = "willow";

Resources​