ejBase

Namespace: Wisej.Web.Ext.Syncfusion

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

• Control
  • Widget
    • ejBase

The ejBase class is the foundation of all Syncfusion JS1 visual controls.

C#

public abstract class ejBase : Widget

VB.NET

Public MustInherit Class ejBase
    Inherits Widget

Each derived class wraps one Syncfusion Essential JS 1 widget. The options of the widget are set through the Options property, the methods of the widget are called through the dynamic Instance property, and the events of the widget are received on the server by attaching a handler to Instance.on[EventName].

The scripts and style sheets to load are read from the Wisej.Web.Ext.Syncfusion.json configuration file. The file is searched in the root folder of the application first, then among the embedded resources of the main assembly, of the assembly that defines the control, and of this extension.

Example:

The following example creates a grid, listens to an event of the widget and calls one of its methods.

var grid = new ejGrid(new
{
	dataSource = orders,
	allowPaging = true
});
grid.Dock = DockStyle.Fill;
this.Controls.Add(grid);

// first level options are sent to the client automatically.
grid.Options.allowSorting = true;

// listen to the "rowSelected" event fired by the Syncfusion widget.
grid.Instance.onRowSelected += new WidgetEventHandler((s, e) =>
{
	AlertBox.Show($"Selected row: {e.Data.rowIndex}");
});

// call the gotoPage() method of the Syncfusion widget.
grid.Instance.gotoPage(2);

Constructors

ejBase(className, options)

Constructs a new instance of the ejBase class that creates the Syncfusion widget className directly on the element of the control.

Name	Type	Description
className	String	Name of the Syncfusion JavaScript widget to create, i.e. ejGrid.
options	Object	Initial set of options: an anonymous object, a JSON string, or null.

See demo at: https://js.syncfusion.com/demos/web/

Throws:

• ArgumentNullException className is null or empty.

Example:

The following example wraps a Syncfusion widget that is not included in the extension.

public class ejProgressBar : ejBase
{
	public ejProgressBar(object options) : base("ejProgressBar", options)
	{
	}
}

var progress = new ejProgressBar(new { value = 40 });
this.Controls.Add(progress);

ejBase(className, html, options)

Constructs a new instance of the ejBase class that creates the Syncfusion widget className on the element defined by html .

Name	Type	Description
className	String	Name of the Syncfusion JavaScript widget to create, i.e. ejDatePicker.
html	String	HTML with a single root element used as the element of the widget.
options	Object	Initial set of options: an anonymous object, a JSON string, or null.

Use this constructor for the widgets that must be created on a specific HTML element, i.e. an <input> or a <textarea>. The html is placed inside the element of the control and its first element becomes the element of the widget.

Throws:

• ArgumentNullException className is null or empty.

Example:

The following example wraps a Syncfusion widget that is created on a button element.

public class ejButton : ejBase
{
	public ejButton(object options)
		: base("ejButton", "<button style='width:100%;height:100%'></button>", options)
	{
	}
}

var button = new ejButton(new { text = "Save", showRoundedCorner = true });
this.Controls.Add(button);

Properties

Culture

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

The default is the current culture of the application. Assigning null restores the default.

The name of the culture is passed to each widget as the locale option, unless the options of the widget already define it, and replaces the %culture% and %locale% placeholders in the package URLs defined in Wisej.Web.Ext.Syncfusion.json to load the matching Syncfusion culture and localization scripts.

The value is stored in the session; changing it recreates all the Syncfusion widgets that already exist in the session.

Example:

// show all the Syncfusion widgets in this session in German.
ejBase.Culture = new CultureInfo("de-DE");

IsInitialized

Boolean: Returns whether the javascript widget has been initialized.

This class never assigns the property, which therefore always returns false. Use IsLoaded to determine whether the widget has been created on the client.

Options

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

The property accepts an anonymous object, a JSON string, or a dynamic object. Strings are parsed and anonymous objects are converted to a writable dynamic object, so that single options can be changed after the assignment. The names of the options are the names used by the Syncfusion Essential JS 1 widget.

Only changes to first level fields are detected automatically. After changing a nested field call Update to update the widget on the client.

Example:

// assign all the options using an anonymous object...
this.datePicker1.Options = new { dateFormat = "dd/MM/yyyy", value = "25/12/2025" };

// ...or using a JSON string.
this.datePicker1.Options = "{ \"dateFormat\": \"dd/MM/yyyy\", \"value\": \"25/12/2025\" }";

// change a first level option: the widget is updated automatically.
this.datePicker1.Options.watermarkText = "Select a date";

// change a nested option: call Update().
this.chart1.Options.title.text = "Sales";
this.chart1.Update();

Theme

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

The value is the name of a Syncfusion theme folder, i.e. flat-azure or flat-azure-dark, and replaces the %theme% placeholder in the package URLs defined in Wisej.Web.Ext.Syncfusion.json.

The value is stored in the session and applies to all the Syncfusion widgets of the session; changing it updates the widgets that already exist. The property returns null when the theme has not been set, in which case the widgets use the default theme defined in the configuration file. Assign null or an empty string to restore the default theme.

Example:

// switch all the Syncfusion widgets in this session to the dark theme.
ejBase.Theme = "flat-azure-dark";

// go back to the default theme defined in Wisej.Web.Ext.Syncfusion.json.
ejBase.Theme = null;

WidgetEvents

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

Each WidgetEventHandler is added to the options of the widget, using the name of the event as the name of the option, when the widget is created on the client. Assign the property before the control is shown.

The handlers run in the browser. To handle an event of the widget on the server attach a handler to Instance.on[EventName] instead. Since a Syncfusion widget keeps one handler for each event, a server handler attached to the same event replaces the JavaScript handler defined here.

Example:

The following example handles the rowSelected event of the grid in the browser and sends a custom event to the server.

var grid = new ejGrid(new { dataSource = orders });
grid.WidgetEvents = new[]
{
	new ejBase.WidgetEventHandler
	{
		Name = "rowSelected",
		Source = "e.container.fireWidgetEvent('orderSelected', { id: e.data.OrderID });"
	}
};
grid.WidgetEvent += (s, e) =>
{
	if (e.Type == "orderSelected")
		AlertBox.Show($"Order: {e.Data.id}");
};
this.Controls.Add(grid);

WidgetFunctions

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

Each WidgetFunction becomes a function of the client side wrapper with the name specified in Name and can be called from the server using Call or CallAsync. Inside the function this is the Wisej.NET widget and this.widget is the Syncfusion widget.

The functions can also be used as values in Options, at any level, using a string in one of these forms (without spaces): "()=>name" or "(a,b)=>name" assigns the function to the option, using the names in parentheses as the parameters of the function; "()=>name()" calls the function when the options are applied and assigns the returned value to the option.

Assign the property before the control is shown. Changing it afterwards does not update the client until Update is called.

Example:

The following example uses a function as the handler of the queryCellInfo option of the grid and calls another function from the server.

var grid = new ejGrid(new
{
	dataSource = orders,
	allowPaging = true,
	queryCellInfo = "(args)=>highlightFreight"
});
grid.WidgetFunctions = new[]
{
	new ejBase.WidgetFunction
	{
		Name = "highlightFreight",
		Source = "if (args.column.field == 'Freight' && args.data.Freight > 100) $(args.cell).css('color', 'red');"
	},
	new ejBase.WidgetFunction
	{
		Name = "getPageCount",
		Source = "return this.widget.model.pageSettings.totalPages;"
	}
};
this.Controls.Add(grid);

// later, i.e. in the handler of a button.
var pages = await grid.CallAsync("getPageCount");

WidgetTemplates

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

Each WidgetTemplate is added to the page as a <script> element with the specified Id, and can be referenced in Options using the selector #id wherever the Syncfusion widget accepts the id of a template. Assign the property before the control is shown.

Example:

The following example defines a JsRender template and uses it as the template of a grid column.

var grid = new ejGrid(new
{
	dataSource = employees,
	columns = new object[]
	{
		new { field = "EmployeeID", headerText = "ID" },
		new { headerText = "Name", template = "#nameTemplate" }
	}
});
grid.WidgetTemplates = new[]
{
	new ejBase.WidgetTemplate
	{
		Id = "nameTemplate",
		Template = "<b>{{:LastName}}</b>, {{:FirstName}}"
	}
};
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
ejAutocomplete	The Autocomplete control for JavaScript is a textbox control that provides a list of suggestions based on the user query.
ejBarcode	The Syncfusion Essential JS Barcode widget enables rendering of one dimension and two dimension barcodes in web page.
ejBulletGraph	BulletGraphs are easy to interpret and also it conveys much more information to the user by visualizing the data in a small amount of space.
ejChart	Essential Chart for JavaScript is a visually stunning Charting component. It includes common Chart types ranging from line Charts to specialized financial Charts.
ejCheckBox	The CheckBox control allows you to check an option to perform an action. This control allows you to select true, false or an intermediate option. These CheckBoxes are supported with themes. The HTML CheckBox control is rendered as Essential JavaScript CheckBox control.
ejCircularGauge	The CircularGauge control visualizes the numerical values of scales in a circular manner. It is also a feature-rich control that provides extensive appearance customization options with support for the animation of a pointer element.
ejColorPicker	The ColorPicker control provides you a rich visual interface for color selection.
ejComboBox	The ComboBox control allows the user to type a value or to choose an option from a list of predefined options.
ejDatePicker	Input field that display the DatePicker calendar as popup to select and set the date value
ejDateRangePicker	The DateRangePicker control displaying two calendars in a web page and allow to pick the two date to form the ranges. Also its calendar consist of flexible option to navigate back and forth from month and years and pick the start and end date in any month. Flexible options of this DateRangePicker provides the easiest way to get the details within the date ranges in application
ejDateTimePicker	The Essential JavaScript DateTimePicker control is used to input the date and time with a specific format. The DateTimePicker control combines the DatePicker and TimePicker controls so that users can select the date and time with their desired format.
ejDiagram	Essential Diagram JavaScript creates rich Visio-like applications. It's Framework comprises of many Elements that helps you to create an application easily. The rich feature set of the Diagram control includes Snapping, Guidelines, Gridlines, Serialization and Zooming.
ejDigitalGauge	The DigitalGauge control displays alphanumeric characters in a digital format, like the segments of an LED display.
ejDropDownList	The DropDownList control provides a list of options to choose an item from the list. It can including other HTML elements such as images, textboxes, check box, radio buttons, and so on.
ejDropDownTree	The DropDownTree control provides a list of hierarchical data to choose an item from the list. It can including other HTML elements such as images, textboxes, check box, radio buttons, and so on.
ejFileExplorer	FileExplorer provides a Windows Explorer-like functionality for any web application. It allows end-users to browse, select and upload files or change the folder structure by renaming, moving and deleting files or folders. File and folder management capabilities are fully customizable and can be disabled when necessary.
ejGantt	The Essential JavaScript Gantt control is designed to visualize and edit the project schedule, and track the project progress. It helps to organize and schedule the projects and also you can update the project schedule through interactions like editing, dragging and resizing.
ejGrid	The Grid control for JavaScript is an efficient display engine for tabular data. It will pull data from a datasource such as array of JSON objects, OData web services, or ej.DataManager; binding data fields to columns and displaying a column header to identify the field. It is a feature-rich control that provides extensive appearance customization options with support for grouped records. This Grid is very useful for generating complex grid-based reports with rich formatting. The most important features available in the Grid control for JavaScript are paging, sorting, filtering, searching, grouping, and editing
ejHeatMap	Essential HeatMap JS represents tabular data values as gradient colors instead of numbers,low and high values are different colors with different gradients.
ejHeatMapLegend	Legend is a control used to summarize the range of colors in HeatMap. This gives visual guideline for mapping between value and color.
ejKanban	The Kanban control for JavaScript is an efficient way to visualize the workflow at each stage along its path to completion. The most important features available are Swim lane, filtering, and editing.
ejLinearGauge	The Gauge control for Essential Studio displays numerical information in the form of a scale that can be customized and oriented either vertically or horizontally.
ejListBox	The ListBox control provides a list of options for users to select from. It is capable of including other HTML elements such as images, text boxes, check boxes, and radio buttons and so on. It also supports data binding, template options and multi-select options.
ejListView	The Essential JavaScript ListView widget builds interactive ListView interface. This control allows you to select an item from a list-like interface and display a set of data items in different layouts or views. Lists are used for displaying data, data navigation, result lists, and data entry.
ejMaskEdit	The MaskEdit control provides an easy and reliable way of collecting user input and displaying standard data in a specific format. Some common uses of the MaskEdit control are IP address editors, phone number editors, and Social Security number editors.
ejMediaPlayer	MediaPlayer component is a html5 component which is used to embed a media in a web page such as web videos, YouTube and audio files.
ejNumericTextbox	NumericTextBox is used to display only numeric values. It has Spin buttons to increase or decrease the values in the Text Box.
ejOverview	The ejOverview control allows you to see a preview or an overall view of the entire content of a ejDiagram. This helps you to look at the overall picture of a large Diagram and also to navigate, pan, or zoom, on a particular position of the page.
ejPager	The Essential Javascript Pager control allows you to navigate between records which are sectioned into pages. The navigation between pages which is key functionality of Pager is done using built-in numeric and navigation buttons and provides easy user interaction.
ejPdfViewer	PDF viewer for JavaScript is a visualization component for viewing and printing the PDF documents in web pages. It is powered by HTML5 or JavaScript and provides various customizations.
ejPercentageTextbox	PercentageTextBox is used to display only percentage values. It has Spin buttons to increase or decrease the values in the Text Box.
ejPivotChart	The pivot chart control for Essential JavaScript is a lightweight control that reads both OLAP and relational data sources and visualizes them in a graphical format with the ability to drill up and down.
ejPivotClient	The pivot client control for the Essential JavaScript provides support to bind both the OLAP and relational data sources. You can visualize the results in graphical and tabular formats (chart and grid). The pivot client control is also used to create and edit a report on-the-fly that is stored for later use.
ejPivotGrid	PivotGrid control is an easily configurable and presentation-quality business control. It reads both OLAP and relational datasources, and allows to create multi-dimensional views for analyzing and satisfying the needs of business user.
ejPivotTreeMap	The PivotTreemap is a lightweight control that reads OLAP information and visualizes it in graphical format with the ability to drill up and down.
ejRating	The Rating control provides an intuitive Rating experience that enables you to select a number of stars that represent a Rating. You can configure the item size, orientation and the number of displayed items in the Rating control. You can also customize the Rating star image by using custom CSS.
ejRecurrenceEditor	The Recurrence Editor includes the entire recurrence related information in a separate portable manner which can be either utilized as a separate widget or else can be embed within the appointment window of Scheduler to enable recurrence options within it. The recurrence rule can be easily generated based on the frequency selected. The customizations like changing the labels of the Recurrence Editor is also possible to achieve through its properties. The frequencies available are Never, Daily, Weekly, Monthly, Yearly and Every weekday.
ejRichTextEditor	Rich text editor is a component that help you to display or edit the content including tables, hyperlinks, paragraphs, lists, video, and images. The editor supports file and folder management using FileExplorer component.
ejRotator	The Rotator control displays a set of slides. Each slide may contain images or images with content, or content with user-defined transition between them.
ejSchedule	An Event calendar that manages the list of various activities like events/appointments.
ejSignature	The Signature control allows the user to draw a signature using the mouse, a pen or a finger. The color and the width of the stroke and the background of the drawing area can be customized, and the drawing can be cleared, undone or saved as an image.
ejSlider	The Slider provides support to select a value from a particular range as well as selects a range value. The Slider has a sliding base on which the handles are moved. There are three types of Sliders such as default Slider, min-range Slider and range Slider.
ejSparkline	Sparklines are easy to interpret and also it conveys much more information to the user by visualizing the data in a small amount of space.
ejSpreadsheet	The Spreadsheet control is a Microsoft Excel-like Spreadsheet component for web. It provides editing experience that is very similar to that of Excel and it is able to import and export Excel workbook files. The Spreadsheet control includes all the important features of Microsoft Excel like editing, sorting, filtering, formulas, data validation, formatting, table, charts, import and export.
ejSunburstChart	The Sunburst Chart visualizes hierarchical data using concentric rings. Each ring represents a level of the hierarchy, starting from the innermost ring, and the size of each segment is proportional to the value of the data it represents.
ejSymbolPalette	The symbol palette control allows to predefine the frequently used nodes and connectors and to drag and drop those nodes/connectors to drawing area.
ejTagCloud	The TagCloud allows the user to display a list of links or tags with a structured cloud format where the importance of the tags can differentiate with varied font sizes, colors, and styles.
ejTile	The Essential Studio for JavaScript Web Tiles are simple, opaque rectangles or squares and they are arrayed on the start screen in a grid-like pattern. Tapping or selecting a Tile, launches the app or does some other action that is represented by the Tile. Tiles are arranged in a group separated by columns that looks like a start screen of a device and it can be either static or live.
ejTimePicker	The TimePicker control for JavaScript allows users to select a time value. The available times can be restricted to a range by setting minimum and maximum time values. The TimePicker sets the time as a mask to prevent users from entering invalid values.
ejToolbar	The Toolbar control supports displaying a list of tools within a web page. This control is capable of customizing toolbar items with any functionality by using enriched client-side methods. This control is composed of collection of unordered lists containing text and images contained into a div.
ejTreeGrid	The Essential JavaScript TreeGrid is an efficient control designed for representing the hierarchical data in a tabular format, combining the visual representation of Grid and TreeView controls. It represents the data from datasource such as array of JSON objects, ej.DataManager or self-referential datasource.
ejTreeMap	Essential TreeMap for JavaScript is ideal for visualizing large amounts of data. TreeMap holds a set of nested nodes to display hierarchical data. Each nested node may contain sub-nodes containing area proportional to a specified data value bounded. Color and annotation can be used to provide extra information about the leaf nodes.
ejTreeView	TreeView control for JavaScript represents hierarchical data in tree like structure with advanced functions to perform edit, drag and drop, selection with checkboxes and more. TreeView can be generated from ‘UL LI’ elements, JSON data source or using OData services.

Implements

Name	Description
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable