kendoBase

Namespace: Wisej.Web.Ext.Kendo

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

Control
- Widget
  - kendoBase

The kendoBase class is the foundation of all Kendo visual controls.

C#
VB.NET

public abstract class kendoBase : Widget

Public MustInherit Class kendoBase
    Inherits Widget

Each derived control hosts one Kendo UI for jQuery widget. The Options object is passed to the widget when it is created in the browser and, when it changes, it is applied through the setOptions function of the widget. A few controls recreate the widget instead, when the changed option cannot be applied to an existing widget.

The functions of the Kendo UI widget can be called through the Instance property, and its events can be handled on the server by attaching a WidgetEventHandler to Instance.on[EventName] or by calling AddListener. The data received with the event in Data is a copy of the Kendo UI event object that includes only strings, numbers, booleans, dates, arrays and nested objects up to a few levels deep. The DOM elements, the jQuery objects and the reference to the widget are not included.

The scripts and style sheets to load, the default theme and the Kendo UI license key are read from the Wisej.Web.Ext.Kendo.json configuration file. The file is searched in the root folder of the application first, then in the embedded resources of the main assembly, of the assembly that defines the control, and of this extension. The theme and the culture can be changed at runtime using the static Theme and Culture properties.

Example:

The following example creates a chart, changes one of its options, handles the seriesClick event on the server and calls the redraw function of the Kendo UI widget.

var chart = new kendoChart(new
{
	title = new { text = "Sales" },
	categoryAxis = new { categories = new[] { "Q1", "Q2", "Q3", "Q4" } },
	series = new[] { new { type = "column", data = new[] { 120, 150, 90, 180 } } }
});
chart.Dock = DockStyle.Fill;
this.Controls.Add(chart);

// changes to first-level options are applied to the widget automatically.
chart.Options.legend = new { visible = false };

// e.Data contains a copy of the data of the Kendo UI event.
chart.Instance.onSeriesClick += new WidgetEventHandler((s, e) =>
{
	string message = e.Data.category + ": " + e.Data.value;
	AlertBox.Show(message);
});

// calls the redraw() function of the Kendo UI widget.
chart.Instance.redraw();

Constructors

kendoBase(className, options)

Constructs a new instance of the kendoBase class.

Name	Type	Description
className	String	Name of the Kendo UI jQuery plugin function that creates the widget, i.e. `kendoGrid`.
options	Object	Initial set of options: an anonymous object, a DynamicObject or a JSON string. Can be null.

See demo at: https://demos.telerik.com/kendo-ui/

Throws:

ArgumentNullException className is null or empty.

Example:

The following example wraps the Kendo UI ProgressBar, a widget that is created on the container element of the control.

public class kendoProgressBar : kendoBase
{
	public kendoProgressBar(object options) : base("kendoProgressBar", options)
	{
	}
}

var progress = new kendoProgressBar(new { min = 0, max = 100, value = 40, type = "percent" });
progress.Size = new Size(300, 30);
this.Controls.Add(progress);

kendoBase(className, html, options)

Constructs a new instance of the kendoBase class.

Name	Type	Description
className	String	Name of the Kendo UI jQuery plugin function that creates the widget, i.e. `kendoDatePicker`.
html	String	HTML markup to place inside the control. The first element of the markup becomes the element on which the Kendo UI widget is created.
options	Object	Initial set of options: an anonymous object, a DynamicObject or a JSON string. Can be null.

Throws:

ArgumentNullException className is null or empty.

Example:

The following example wraps the Kendo UI NumericTextBox, a widget that must be created on an input element.

public class kendoNumericTextBox : kendoBase
{
	public kendoNumericTextBox(object options)
		: base("kendoNumericTextBox", "<input style='width:100%'>", options)
	{
	}
}

var price = new kendoNumericTextBox(new { min = 0, max = 1000, step = 5, format = "c2", value = 250 });
price.Width = 200;
this.Controls.Add(price);

Properties

Culture

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

The default is CurrentCulture, which is also used when the property is set to null. The name of the culture replaces the %culture% placeholder, and its two-letter language code replaces the %locale% placeholder, in the URLs of the packages listed in the Wisej.Web.Ext.Kendo.json configuration file in order to load the corresponding Kendo UI culture and messages scripts. The culture is then applied in the browser using kendo.culture().

The value is stored in the session. Changing it reloads the packages and recreates all the Kendo widgets in the session.

Example:

// use the German formats and messages in all the Kendo widgets in the current session.
kendoBase.Culture = new CultureInfo("de-DE");

Options

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

The property accepts an anonymous object, a DynamicObject or a JSON string. Anonymous objects and JSON strings are converted to a DynamicObject, therefore the options can always be read and changed field by field after the assignment.

Changes to the first-level fields are detected automatically and applied to the widget in the browser. After changing a nested field call Update.

The fields are named after the configuration options of the Kendo UI widget. A string value in the form "()=>name" refers to a JavaScript function defined in WidgetFunctions.

Example:

// assign an anonymous object...
this.kendoGrid1.Options = new { sortable = true, pageable = new { pageSize = 20 } };

// ...or a JSON string.
this.kendoGrid1.Options = "{ \"sortable\": true, \"pageable\": { \"pageSize\": 20 } }";

// changes to first-level fields are applied automatically.
this.kendoGrid1.Options.height = 400;

// changes to nested fields require a call to Update().
this.kendoGrid1.Options.pageable.pageSize = 50;
this.kendoGrid1.Update();

Theme

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

The value is the name of a Kendo UI theme and replaces the %theme% placeholder in the URLs of the packages listed in the Wisej.Web.Ext.Kendo.json configuration file, i.e. bootstrap-main loads kendo.bootstrap-main.min.css. When the property is null or empty, the widgets use the theme specified in the theme field of the configuration file.

The value is stored in the session. Changing it reloads the packages and updates all the Kendo widgets in the session.

Example:

// use the Material theme for all the Kendo widgets in the current session.
kendoBase.Theme = "material-main";

// revert to the theme specified in Wisej.Web.Ext.Kendo.json.
kendoBase.Theme = null;

WidgetEvents

WidgetEventHandler[]: Returns or sets the JavaScript handlers to attach to the events fired by the Kendo UI widget. (Default: null)

The handlers run in the browser. Each WidgetEventHandler is assigned to the option named after the Name of the event when the Kendo UI widget is created, therefore the handlers must be assigned before the widget is created in the browser. Within the handler, this refers to the Kendo UI widget, e to the event data, and e.container to the Wisej widget.

To handle an event of the Kendo UI widget on the server, attach a WidgetEventHandler to Instance.on[EventName] instead.

Example:

The following example handles the dataBound event of a grid in the browser to highlight the products out of stock.

var grid = new kendoGrid(new
{
	dataSource = new[]
	{
		new { product = "Chai", stock = 39 },
		new { product = "Chang", stock = 0 }
	}
});
grid.WidgetEvents = new[]
{
	new kendoBase.WidgetEventHandler
	{
		Name = "dataBound",
		Source = @"
			var grid = this;
			grid.tbody.find('tr').each(function () {
				if (grid.dataItem(this).stock === 0)
					$(this).css('color', 'red');
			});"
	}
};
this.Controls.Add(grid);

WidgetFunctions

WidgetFunction[]: Returns or sets the JavaScript functions to add to the widget in the browser. (Default: null)

Each WidgetFunction is added to the client side wrapper of the widget using its Name, and can be invoked from the server using Call or CallAsync. When a function is invoked before the Kendo UI widget is created, the call is deferred until the widget is initialized.

A function can also be assigned to a field in Options by setting the field, at any level, to a string that refers to the function by name, without spaces: "()=>name" or "(a,b)=>name" assigns the function to the field, declaring the listed parameter names, while "()=>name()" calls the function and assigns the returned value to the field.

Example:

The following example uses a function to format the labels of the value axis of a chart.

var chart = new kendoChart(new
{
	series = new[] { new { type = "column", data = new[] { 1200, 1500, 900 } } },
	valueAxis = new { labels = new { template = "(e)=>formatValue" } }
});
chart.WidgetFunctions = new[]
{
	new kendoBase.WidgetFunction
	{
		Name = "formatValue",
		Source = "return kendo.toString(e.value, 'c0');"
	}
};
this.Controls.Add(chart);

WidgetTemplates

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

Each WidgetTemplate is added to the page as a script element with the specified Id and Type. Templates without an id or without content are ignored.

To use a registered template in Options, compile it with kendo.template() in a function defined in WidgetFunctions and assign the result to the option using the "()=>name()" syntax.

Example:

The following example registers a template and uses it to render the cells of a grid column.

var grid = new kendoGrid();
grid.WidgetTemplates = new[]
{
	new kendoBase.WidgetTemplate
	{
		Id = "productTemplate",
		Template = "<b>#: product #</b>"
	}
};
grid.WidgetFunctions = new[]
{
	new kendoBase.WidgetFunction
	{
		Name = "getProductTemplate",
		Source = "return kendo.template($('#productTemplate').html());"
	}
};
grid.Options.dataSource = new[]
{
	new { product = "Chai", price = 18.0 },
	new { product = "Chang", price = 19.5 }
};
grid.Options.columns = new object[]
{
	new { field = "product", title = "Product", template = "()=>getProductTemplate()" },
	new { field = "price", title = "Price", format = "{0:c2}" }
};
this.Controls.Add(grid);

Methods

Dispose(disposing)

Disposes of resources.

Parameter	Type	Description
disposing	Boolean

OnWebRender(config)

Wire the client config to the server

Parameter	Type	Description
config	Object

Inherited By

Name	Description
kendoArcGauge	The ArcGauge represents a value on a circular arc.
kendoAutoComplete	The AutoComplete provides suggestions depending on the typed text and allows multiple value entries.
kendoBarcode	The Barcode represents data in a machine-readable format.
kendoBreadcrumb	The Breadcrumb is an intuitive UI component that allows navigation within a folder structure or web page. It provides an easy way to navigate backwards by one or multiple steps.
kendoCalendar	The Calendar renders a graphical calendar that provides navigation and selection functionalities.
kendoCaptcha	The Kendo UI Captcha widget allows you to prevent spam in form submissions by requesting user/human input of distorted image of letters and numbers. The widget also provides audio reproduction of the image.
kendoChart	The Kendo UI Chart uses modern browser technologies to render high-quality data visualizations.
kendoChat	The Chat allows the user to participate in chat sessions with other users or with chat bots.
kendoDatePicker	The DatePicker enables the user to select a date from a calendar or through a direct input.
kendoDateRangePicker	The DateRangePicker is a container for holding start and end date inputs.
kendoDateTimePicker	The DateTimePicker allows the user to select a value from a calendar, a time drop-down list, or through direct input.
kendoDiagram	The Diagram represents information in a schematic way and according to particular visualization techniques.
kendoDrawer	The Drawer is a dismissible panel used for navigation in responsive web applications or for changing a content of a section in the page.
kendoDropDownList	The DropDownList displays a list of values and allows for a single selection from the list.
kendoDropDownTree	The DropDownTree represents an editor of hierarchical data, rendered in a tree-like structure, which provides multiple selection option and custom nodes.
kendoEditor	The Kendo UI for jQuery Editor is a powerful WYSIWYG component, which allows you and your users to create rich text content in a familiar and user-friendly way. It provides a variety of tools for creating, editing, styling and formatting text, paragraphs, lists, images, tables, hyperlinks and other HTML elements.
kendoFileManager	The Kendo UI FileManager allows you to manage the file system and to perform the most common folder/file operations.
kendoForm	The Kendo UI for jQuery Form is a component, which allows you to generate and manage forms.
kendoGantt	The Gantt displays a set of tasks and dependencies which are used to visualize project-planning data.
kendoGrid	The Grid is a powerful control for displaying data in a tabular format.
kendoImageEditor	Represents a Kendo UI Image Editor widget.
kendoLinearGauge	The LinearGauge represents values on a linear scale.
kendoMap	The Map displays geospatial information organized in layers and is supported for both desktop and mobile devices.
kendoMediaPlayer	The MediaPlayer plays video files from static sources or streams online YouTube videos and enriches your website with dynamic content in a user-friendly interface.
kendoMultiColumnComboBox	The MultiColumnComboBox visualizes huge sets of data in a grid-like table.
kendoMultiSelect	The MultiSelect displays a list of options and allows multiple selections from this list.
kendoMultiViewCalendar	The MultiViewCalendar renders a graphical Gregorian calendar with multiple horizontal views.
kendoOrgChart	The Kendo UI for jQuery OrgChart allows you to view and interact with organizational structures. The component provides the possibility to easily visualize hierarchies.
kendoPDFViewer	The PDFViewer displays PDF files in the browser and consists of a toolbar and a scrollable container that wraps the page elements.
kendoPivotGrid	The Kendo UI PivotGrid represents multidimensional data in a cross-tabular format.
kendoPivotGridV2	Like its original version, the Kendo UI PivotGridV2 represents multidimensional data in a cross-tabular format.
kendoQRCode	The QRCode generates Canvas and Scalable Vector Graphics (SVG) images that represent Quick Response (QR) codes.
kendoRadialGauge	The Kendo UI RadialGauge widget enables users to quickly understand in what certain range a value lies.
kendoRangeSlider	The Kendo UI RangeSlider displays a range of values and allows you to select ranges of values.
kendoRating	The Rating allows to intuitively rate by selecting number of items stars from a predefined maximum number of items.
kendoScheduler	The Scheduler displays a set of events, appointments, or tasks.
kendoSlider	The Slider provides a rich input for selecting numeric values.
kendoSparkline	The Kendo UI Sparkline is a very small chart that is drawn without axes, coordinates, legends, titles, or other chart-specific elements.
kendoSpreadsheet	The Spreadsheet allows you to edit and visualize tabular data by using cell formatting options, styles, and themes.
kendoStepper	The Stepper is an intuitive UI component that visualizes progress by displaying a sequence of logical steps. The Stepper widget could also be used for navigational purposes.
kendoStockChart	The StockChart is a specialized control visualizing the price movement of any financial instrument over a certain period of time.
kendoSwitch	The Switch displays two exclusive choices.
kendoTaskBoard	The Kendo UI TaskBoard component allows you to easily organize items and keep track of their state and status. The TaskBoard provides a clean and user-friendly interface for managing tasks, notes, projects, people, or other kinds of items.
kendoTimeline	The Kendo UI Timeline widget displays a collection of events and their data in a chronological succession for each year.
kendoTimePicker	The TimePicker enables users to select time values from a predefined list or enter new ones.
kendoTreeList	The TreeList enables the display of self-referencing tabular data and allows sorting, filtering, and data editing.
kendoTreeMap	The TreeMap displays hierarchical data in a traditional tree structure.
kendoTreeView	The Kendo UI TreeView widget displays hierarchical data in a traditional tree structure.
kendoWizard	The Wizard displays content in sequential, stepwise order. Each step of the Kendo UI Wizard has content, which can be a form or any other type of HTML content.

Implements

Name	Description
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable

Constructors​

kendoBase(className, options)​

kendoBase(className, html, options)​

Properties​

Culture​

Options​

Theme​

WidgetEvents​

WidgetFunctions​

WidgetTemplates​

Methods​

Dispose(disposing)​

OnWebRender(config)​

Inherited By​

Implements​

Constructors

kendoBase(className, options)

kendoBase(className, html, options)

Properties

Culture

Options

Theme

WidgetEvents

WidgetFunctions

WidgetTemplates

Methods

Dispose(disposing)

OnWebRender(config)

Inherited By

Implements