Skip to main content

igBase

Namespace: Wisej.Web.Ext.Ignite

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

The igBase class is the foundation of all Ignite UI visual controls.

public abstract class igBase : Widget

Each derived control wraps one Ignite UI for jQuery widget. The widget is configured through the dynamic Options object, which is passed to the JavaScript widget when it is created or updated. The methods of the JavaScript widget are invoked through the dynamic Instance object, and its events are handled on the server by attaching a handler to Instance.onEventName.

The client wrapper always sets the width and height options to fill the control. Size and position the widget using the layout properties of the control.

The JavaScript and CSS files of the Ignite UI library are loaded from the locations listed in the Wisej.Web.Ext.Ignite.json configuration file, see Packages.

Example:

The following example creates a rating widget, handles its valueChange event on the server and resets the rating by calling the value method of the JavaScript widget.

var rating = new igRating(new { voteCount = 5, value = 3 });
rating.Instance.onValueChange += new WidgetEventHandler(this.rating_ValueChange);
this.Controls.Add(rating);

// later, i.e. in a button click handler.
rating.Instance.value(0);

// e.Data contains the fields of the "ui" argument received from the widget.
private void rating_ValueChange(object sender, WidgetEventArgs e)
{
	AlertBox.Show($"New rating: {e.Data.value}");
}

Constructors​

Instance member igBase(className, options)​

Constructs a new instance of the igBase class.

NameTypeDescription
classNameStringName of the Ignite UI jQuery widget to create, i.e. "igGrid".
optionsObjectInitial set of options passed to the widget: an anonymous object, a JSON string or a dynamic object. Can be null.

See demo at: overview

Throws:

Example:

The following example wraps the Ignite UI igNumericEditor widget, which does not have a predefined control in this extension.

public class igNumericEditor : igBase
{
	public igNumericEditor(object options) : base("igNumericEditor", options)
	{
	}
}

var editor = new igNumericEditor(new { value = 42, minValue = 0, maxValue = 100 });
this.Controls.Add(editor);

Instance member igBase(className, html, options)​

Constructs a new instance of the igBase class.

NameTypeDescription
classNameStringName of the Ignite UI jQuery widget to create, i.e. "igDatePicker".
htmlStringHTML markup to render inside the control. The widget is created on the first element in the markup.
optionsObjectInitial set of options passed to the widget: an anonymous object, a JSON string or a dynamic object. Can be null.

Use this constructor when the Ignite UI widget must be created on a specific HTML element instead of the default container element. The html is rendered inside the control and the widget is created on its first element.

Throws:

Example:

The following example wraps the Ignite UI igDatePicker widget and creates it on an input element.

public class igDatePicker : igBase
{
	public igDatePicker(object options) : base("igDatePicker", "<input type=\"text\" />", options)
	{
	}
}

var picker = new igDatePicker(new { value = DateTime.Today });
this.Controls.Add(picker);

Properties​

Static member Culture​

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

The culture selects the Ignite UI localization file to load (the %locale% and %culture% placeholders in the package URLs defined in the Wisej.Web.Ext.Ignite.json configuration file) and is passed to each widget in the regional and language options.

The value is stored in the session. When it is not set, or it is set to null, the property returns CurrentCulture. Changing it resets the Packages of all the Ignite widgets that exist in the session and recreates them.

Example:

// show all the Ignite widgets in the session using the German localization.
igBase.Culture = new CultureInfo("de-DE");

Instance member Options​

Object: Returns or sets the configuration options passed to the Ignite UI widget.

The property accepts an anonymous object, a JSON string or a dynamic object. JSON strings are parsed and other objects are converted to a writable dynamic object, allowing the application to change individual fields after the assignment. The field names must match the option names of the Ignite UI widget.

Changes to first level fields update the widget automatically. After changing a nested field, call Update to update the widget.

String values in the form "()=>name" are replaced on the client with the JavaScript function with the same name defined in WidgetFunctions.

Example:

// assign all the options using an anonymous object.
this.igCombo1.Options = new
{
	dataSource = countries,
	valueKey = "Code",
	textKey = "Name",
	multiSelection = new { enabled = true }
};

// or using a JSON string.
this.igRating1.Options = "{ \"voteCount\": 5, \"value\": 3 }";

// first level field: the widget is updated automatically.
this.igCombo1.Options.placeHolder = "Select a country";

// nested field: call Update().
this.igCombo1.Options.multiSelection.showCheckboxes = true;
this.igCombo1.Update();

Static member Theme​

String: Returns or sets the name of the Ignite UI theme used by all the Ignite widgets in the current session.

The value replaces the %theme% placeholder in the package URLs defined in the Wisej.Web.Ext.Ignite.json configuration file. It must match the name of one of the theme folders distributed with Ignite UI, i.e. "infragistics" or "metro". When the value is null or empty, the widgets use the default theme specified in the configuration file.

The value is stored in the session. Changing it resets the Packages of all the Ignite widgets that exist in the session and updates them.

Example:

// usually set once, before the first Ignite widget is created.
igBase.Theme = "metro";

Instance member WidgetEvents​

WidgetEventHandler[]: Returns or sets the JavaScript handlers attached to the events of the Ignite UI widget on the client. (Default: null)

The handlers run in the browser and are attached when the widget is created: each handler is assigned to the widget option with the same name as the event. To handle an event on the server without writing JavaScript, attach a handler to Instance.onEventName instead.

See WidgetEventHandler for the arguments available to the JavaScript code.

Example:

The following example handles the valueChange event of the rating widget in the browser and notifies the server using a custom widget event.

this.igRating1.WidgetEvents = new[]
{
	new igBase.WidgetEventHandler
	{
		Name = "valueChange",
		Source = "e.container.fireWidgetEvent('rated', { value: arguments[1].value });"
	}
};
this.igRating1.WidgetEvent += (s, e) =>
{
	if (e.Type == "rated")
		AlertBox.Show($"New rating: {e.Data.value}");
};

Instance member WidgetFunctions​

WidgetFunction[]: Returns or sets the JavaScript functions added to the widget on the client. (Default: null)

Each function is added to the client widget using its Name and can be invoked from the server using Call.

The functions can also be used as values in Options by setting an option to a string in one of the following forms, without any space around the arrow:

"()=>name" or "(a,b)=>name": the option is set to the function, declared with the specified parameters.

"()=>name()": the function is invoked when the options are processed and the option is set to the value it returns.

Options are replaced only when a function with the specified name exists in this collection.

Example:

The following example uses a JavaScript function to format the values of a grid column.

var grid = new igGrid(new
{
	dataSource = products,
	autoGenerateColumns = false,
	columns = new object[]
	{
		new { key = "Name", headerText = "Product" },
		new { key = "Price", headerText = "Price", formatter = "(val)=>formatPrice" }
	}
});
grid.WidgetFunctions = new[]
{
	new igBase.WidgetFunction
	{
		Name = "formatPrice",
		Source = "return '$ ' + Number(val).toFixed(2);"
	}
};
this.Controls.Add(grid);

Instance member WidgetTemplates​

WidgetTemplate[]: Returns or sets the templates registered in the browser for the widget. (Default: null)

Each template is added to the page as a script element using the Id as the id of the element, unless an element with the same id already exists. Templates without an id or without content are ignored. The content of the element can be retrieved in JavaScript code, i.e. in one of the WidgetFunctions.

Example:

The following example registers an item template and uses a JavaScript function to assign it to the itemTemplate option of the combo box.

var combo = new igCombo(new
{
	dataSource = products,
	valueKey = "Id",
	textKey = "Name",
	itemTemplate = "()=>getItemTemplate()"
});
combo.WidgetTemplates = new[]
{
	new igBase.WidgetTemplate
	{
		Id = "productItemTemplate",
		Template = "<b>${Name}</b> (${Category})"
	}
};
combo.WidgetFunctions = new[]
{
	new igBase.WidgetFunction
	{
		Name = "getItemTemplate",
		Source = "return $('#productItemTemplate').html();"
	}
};
this.Controls.Add(combo);

Methods​

Protected member Dispose(disposing)​

Disposes of resources.

ParameterTypeDescription
disposingBoolean

Protected member OnWebRender(config)​

Wire the client config to the server

ParameterTypeDescription
configObject

Inherited By​

NameDescription
igBulletGraphThe igBulletGraph is an HTML5, canvas-based bullet graph control. It displays a single primary measure and compares to one or more other measures to create a concise data visualization.
igCategoryChartThe igCategoryChart is an HTML5 control that is a simplified version of the igDataChart.
igColorPickerThe igColorPicker is a simple color picker control that displays a palette of colors to select from.
igComboThe igCombo is a full-featured combo box control.
igDataChartThe igDataChart is a charting control for rendering various kinds of charts into HTML5 Web applications and sites. It uses the new Canvas tag in HTML5 to plot data series on web pages.
igDateEditorThe igDateEditor control includes a host of configuration options to help you format and constrain the date data coming from input forms.
igDoughnutChartThe igDoughnutChart displays data similar to a pie chart and can display multiple sets of data around a common center.
igFinancialChartThe igFinancialChart is an HTML5 control that is a simplified version of the igDataChart specialized in the visualization of financial data, i.e. stock prices and volumes over time.
igFunnelChartThe igFunnelChart control is similar to the igPieChart in that it displays values associated with different categories.
igGridThe igGrid control is a jQuery grid that includes user interaction features like filtering, grouping, column hiding and resizing, paging, row and cell selection.
igHierarchicalGridThe igHierarchicalGrid is built on top of the fastest jQuery grid on the market, the igGrid. It adds the capability to display hierarchical data sets.
igHtmlEditorThe igHtmlEditor control is a jQuery HTML editor control that features standard HTML editing capabilities.
igLinearGaugeThe igLinearGauge is useful for showing a single measure on a linear range.
igMapThe igMap is a HTML5 jQuery map control that can render data sets consisting of large number of geographic locations in shapes of markers, lines, polygons, and even as interactive bitmaps.
igPieChartThe igPieChart is a charting control for rendering pie charts in HTML5 Web applications and sites.
igPivotDataSelectorThe igPivotDataSelector is a jQuery UI widget that enables users to select data slices, typically, when data is being visualized in an igPivotGrid.
igPivotGridThe igPivotGrid is a jQuery UI widget that displays multidimensional (OLAP) data in a pivot table, allowing users to arrange hierarchies and measures in rows, columns and filters.
igQRCodeBarcodeThe igQRCodeBarcode control is a HTML5, canvas-based control. It renders QR (Quick Response) Codes representing alphanumeric data such as a URL.
igRadialGaugeThe igRadialGauge control can display a gauge with visual elements including a scale with tick marks and labels, a needle, and a number of ranges.
igRatingThe igRating control is an HTML 5 capable jQuery widget that lets users rate an item by selecting a number of votes (stars).
igSchedulerThe igScheduler control provides a common scheduling solution for presenting and managing time periods and the associated activities.
igShapeChartThe igShapeChart is an HTML5 control that is a simplified version of the igDataChart specialized in plotting scatter points and shapes (polygons and polylines).
igSparklineThe igSparkline is a data-intense, design-simple control that allows end users to spot trends, variations and patterns in data in a clear and compact representation.
igSplitButtonSplit buttons, also known as split drop down buttons, are useful when you want to provide a default action/command for a button but also need to supply other, secondary options.
igSpreadsheetThe igSpreadsheet control allows visualization of spreadsheet data, represented by the data model supported by the Infragistics Javascript Excel Library comprising of Workbooks, Worksheets, Cells, Formulas and more.
igTimePickerThe igTimePicker control is an editor with time-only input and a drop-down with listed hours:minutes values.
igTreeThe igTree control is a jQuery tree control that binds to UL HTML elements, JSON, XML, .NET collections, and remote data sources.
igTreeGridThe igTreeGrid control is a jQuery widget that displays data in a tree-like tabular structure.
igVideoPlayerThe igVideoPlayer is a jQuery UI widget that displays HTML5 video displaying a consistent user interface across browsers.
igZoombarThe igZoombar is a jQuery UI zooming slider control.

Implements​

NameDescription
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable