Skip to main content

ej2Base

Namespace: Wisej.Web.Ext.Syncfusion2

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

The ej2Base class is the foundation of all Syncfusion EJ2 visual controls.

public abstract class ej2Base : Widget

Each derived control wraps one Syncfusion Essential JS 2 (EJ2) component. The Options object is passed to the constructor of the EJ2 component when it is created in the browser, and is applied to the component again when it changes. The methods of the EJ2 component can be invoked through Instance and its events can be handled on the server by attaching a WidgetEventHandler to Instance.on{EventName}.

The scripts and style sheets to load, the default theme and the Syncfusion license key are read from the Wisej.Web.Ext.Syncfusion2.json configuration file.

Example:

The following example creates a grid, handles one of its events on the server and invokes one of its methods.

var grid = new Grid(new
{
	allowPaging = true,
	dataSource = new[]
	{
		new { id = 1, product = "Chai", price = 18.0 },
		new { id = 2, product = "Chang", price = 19.0 }
	},
	columns = new[]
	{
		new { field = "id", headerText = "ID" },
		new { field = "product", headerText = "Product" },
		new { field = "price", headerText = "Price" }
	}
});
grid.Dock = DockStyle.Fill;
grid.Instance.onRowSelected += new WidgetEventHandler((s, e) =>
{
	AlertBox.Show($"Selected row {e.Data.rowIndex}");
});
this.Controls.Add(grid);

// invoke a method of the EJ2 component.
grid.Instance.selectRow(0);

Constructors​

Instance member ej2Base(className, options)​

Constructs a new instance of the ej2Base class.

NameTypeDescription
classNameStringThe fully qualified name of the EJ2 JavaScript class to create in the browser, i.e. ej.grids.Grid.
optionsObjectInitial set of options passed to the constructor of the EJ2 component. It can be an anonymous object, a JSON string, or null.

See demo at: https://ej2.syncfusion.com/demos/

Throws:

Example:

The following example derives from ej2Base to wrap an EJ2 component that is rendered in a div element.

public class Accordion : ej2Base
{
	public Accordion() : this(null)
	{
	}

	public Accordion(object options) : base("ej.navigations.Accordion", options)
	{
	}
}

var accordion = new Accordion(new
{
	items = new[]
	{
		new { header = "Shipping", content = "Orders are shipped within two days." },
		new { header = "Returns", content = "Returns are accepted within 30 days." }
	}
});
this.Controls.Add(accordion);

Instance member ej2Base(className, html, options)​

Constructs a new instance of the ej2Base class.

NameTypeDescription
classNameStringThe fully qualified name of the EJ2 JavaScript class to create in the browser, i.e. ej.calendars.DatePicker.
htmlStringThe HTML of the element to create inside the control. The EJ2 component is attached to the first element in html .
optionsObjectInitial set of options passed to the constructor of the EJ2 component. It can be an anonymous object, a JSON string, or null.

Use this constructor for the EJ2 components that must be attached to a specific HTML element, such as an input or a button, instead of a div.

Throws:

Example:

The following example derives from ej2Base to wrap an EJ2 component that is rendered in an input element.

public class NumericTextBox : ej2Base
{
	public NumericTextBox(object options) : base("ej.inputs.NumericTextBox", "<input type='text'>", options)
	{
	}
}

var quantity = new NumericTextBox(new { value = 1, min = 1, max = 100, step = 1 });
this.Controls.Add(quantity);

Properties​

Static member Culture​

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

The default is CurrentCulture. The value is stored in the current session; setting it to null restores the current culture of the application.

Changing the culture calls ej.base.setCulture in the browser with the name of the culture and recreates all the existing ej2Base widgets in the session. The name of the culture and its two-letter language code also replace the %culture% and %locale% placeholders in the package URLs defined in the Wisej.Web.Ext.Syncfusion2.json configuration file.

Example:

// switch all the EJ2 widgets in this session to German.
ej2Base.Culture = new CultureInfo("de-DE");

Instance member Options​

Object: Returns or sets the configuration options passed to the EJ2 component.

The options can be assigned as an anonymous object, as a DynamicObject, or as a JSON string. JSON strings are parsed and anonymous objects are converted to a DynamicObject, allowing the application to read and change the individual options after they have been assigned.

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

Example:

// assign the options as an anonymous object, or as a JSON string.
this.grid1.Options = new { allowPaging = true, pageSettings = new { pageSize = 20 } };
this.grid2.Options = "{ \"allowPaging\": true, \"pageSettings\": { \"pageSize\": 20 } }";

// changes to first level fields are detected automatically.
this.grid1.Options.allowSorting = true;

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

Static member Theme​

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

The value is stored in the current session and replaces the %theme% placeholder in the package URLs defined in the Wisej.Web.Ext.Syncfusion2.json configuration file: it must be the name of one of the theme style sheets available at the configured source, i.e. material, bootstrap5, fabric, tailwind.

When the value is null or empty, the widgets use the theme specified in the configuration file. Changing the theme updates all the existing ej2Base widgets in the session.

Example:

// use the bootstrap5 theme for all the EJ2 widgets in this session.
ej2Base.Theme = "bootstrap5";

// go back to the theme specified in Wisej.Web.Ext.Syncfusion2.json.
ej2Base.Theme = null;

Instance member WidgetEvents​

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

The handlers run in the browser. Each WidgetEventHandler is assigned to the option that corresponds to the Name of the event when the EJ2 component is created, therefore the handlers must be assigned before the widget is created in the browser.

To handle an event of the EJ2 component on the server, attach a WidgetEventHandler to Instance.on{EventName} instead.

Example:

The following example handles the queryCellInfo event of the grid in the browser to change the color of a cell.

var grid = new Grid(new
{
	dataSource = new[]
	{
		new { product = "Chai", stock = 39 },
		new { product = "Chang", stock = 0 }
	}
});
grid.WidgetEvents = new[]
{
	new ej2Base.WidgetEventHandler
	{
		Name = "queryCellInfo",
		Source = "if (e.column.field === 'stock' && e.data.stock === 0) e.cell.style.color = 'red';"
	}
};
this.Controls.Add(grid);

Instance member 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.

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 values displayed in a grid column.

var grid = new Grid(new
{
	dataSource = new[]
	{
		new { product = "Chai", price = 18.0 },
		new { product = "Chang", price = 19.5 }
	},
	columns = new object[]
	{
		new { field = "product", headerText = "Product" },
		new { field = "price", headerText = "Price", valueAccessor = "(field,data,column)=>formatPrice" }
	}
});
grid.WidgetFunctions = new[]
{
	new ej2Base.WidgetFunction
	{
		Name = "formatPrice",
		Source = "return '$ ' + data[field].toFixed(2);"
	}
};
this.Controls.Add(grid);

Instance member 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 can be referred to in Options using the #id selector. A template is registered only once: when the page already contains an element with the same id, the template is not replaced.

Example:

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

var grid = new Grid();
grid.WidgetTemplates = new[]
{
	new ej2Base.WidgetTemplate
	{
		Id = "productTemplate",
		Template = "<b>${product}</b>"
	}
};
grid.Options.dataSource = new[]
{
	new { product = "Chai", price = 18.0 },
	new { product = "Chang", price = 19.5 }
};
grid.Options.columns = new object[]
{
	new { headerText = "Product", template = "#productTemplate" },
	new { field = "price", headerText = "Price" }
};
this.Controls.Add(grid);

Methods​

Protected member Dispose(disposing)​

Disposes of resources.

ParameterTypeDescription
disposingBoolean

Protected member OnWebRender(config)​

Wire the client config to the server

ParameterTypeDescription
configObject

Instance member Update()​

Causes the control to update the corresponding client side widget. When in design mode, causes the rendered control to update its entire surface in the designer.

Call this method after changing a nested field in Options: only the changes to first level fields are detected automatically.

Example:

// primaryXAxis is a nested object assigned when the chart was created.
this.chart1.Options.primaryXAxis.title = "Month";
this.chart1.Update();

Inherited By​

NameDescription
AccumulationChartIn EJ2, accumulation chart is implemented as a separate control to avoid the axis related logics. The dependencies for accumulation chart is same as chart control.
BulletChartBullet charts are used to visually compare measures, like the commonly used bar chart. They display one or more measures and compare them with a target value.
CalendarThe Calendar is a graphical user interface component which provides the multi-view representation to display and select a date. Also, provide options to navigate in different levels of views like month, year, decade.
ChartThe Chart control is used to visualize the data with user interactivity and provides customizing options to configure the data visually.
ChatThe Chat UI component is a modern conversation surface that supports messages, mentions, typing indicators, replies, pinning, forwarding and attachments.
ChipListChip is a small block of essential information that triggers an event on click action. It contains the text, an image, or both, mostly used in contacts, mails or filter tags.
CircularGaugeThe circular gauge control is ideal to visualize numeric values over a circular scale. All the circular gauge elements are rendered using Scalable Vector Graphics(SVG).
ColorPickerA control that lets the user pick a color.
DatePickerRepresents the DatePicker component that allows user to select or enter a date value.
DateRangePickerDateRangePicker is an interactive component that allows the user to select a range from the calendar, or to set a range value.
DateTimePickerThe DateTimePicker is a graphical user interface component that allows the user to select, or to enter a datetime value.
DiagramThe diagram component visually represents information. It is also used to create diagrams like flow charts, organizational charts, mind maps, and BPMN either through code or a visual interface.
DocumentEditorThe Document Editor component is used to create, edit, view, and print Word documents in web applications. All the user interactions and editing operations that run purely in the client-side provides much faster editing experience to the users.
DropDownListThe DropDownList component contains a list of predefined values from that the user can choose a single value.
DropDownTreeThe Dropdown Tree control contains a hierarchical structure list of pre-defined values from that the user can choose a single value.
FileManagerThe File Manager component is used to explore a file system through a web application, similar to the windows explorer for windows. It supports the basic file operations such as create, rename, delete.
GanttThe Gantt chart is a project management control used to display and manage the tasks of a project, with their hierarchy, duration, progress and dependencies, on a timeline.
GridThe Grid is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated.
HeatMapThe Heat map control is used to visualize a two-dimensional data in which the values are represented in gradient or fixed colors.
InPlaceEditorThe HTML5/JavaScript In-Place Editor control is most useful for editing a value dynamically within its context (in-place). It has built-in support to handle all the form controls, including TextBox, Dropdown List, DatePicker, and Rich Text Editor. It features inline and pop-up modes, and customizable user interface (UI) and events.
KanbanThe Kanban Board is an efficient way to visualize workflow at each stage along its path to completion. The control supports necessary features to design task scheduling applications.
LinearGaugeThe Gauge control for Essential Studio displays numerical information in the form of a scale that can be customized and oriented either vertically or horizontally.
ListBoxThe ListBox is a graphical user interface component used to display a list of items. Users can select one or more items in the list using a checkbox or by keyboard selection. It supports sorting, grouping, reordering and drag and drop of items.
ListViewThe listview control allows you to select an item or multiple items from a list-like interface and represents the data in interactive hierarchical structure across different layouts or views.
MapsThe Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options.
MenuThe menu component is a graphical user interface that serves as navigation header for your application or site.
MultiSelectThe MultiSelect component contains a list of predefined values from which a multiple value can be chosen. The functionality of MultiSelect resembles the SELECT form element of HTML.
PDFViewerThe PDF Viewer component enables you to view and print the PDF files.
PivotViewThe pivot table is an easily configurable, presentation-quality business control used for visualizing relational data sources in cross-tabular format. It is displayed with drill-up and drill-down capabilities and allows users to easily aggregate data.
ProgressBarThe progress bar provides a customizable visual to indicate the progress of a task with different shape such as rectangle and circle.
ProgressButtonThe ProgressButton visualizes the progression of an operation to indicate the user that a process is happening in the background with visual representation.
QueryBuilderThe Query Builder component is a graphical user interface that allows users to create and edit filters. It outputs a structured JSON of filters that can be easily parsed to create SQL.
RangeNavigatorRangeNavigator is a data visualization control. It allows you to scroll and navigate through the data. This control easily combines with other controls such as Chart, Data Grid, etc., to create rich and powerful dashboards.
RichTextEditorThe rich text editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.
ScheduleThe schedule component is an event calendar that facilitates almost all the basic Outlook and Google Calendar features, allowing the user to plan and manage appointments and time efficiently.
SidebarSidebar is an expandable or collapsible component that typically act as a side container to place the primary or secondary content alongside of the main content.
SignatureThe Signature control is a user interface to draw the signature digitally. The Signature control is displayed as a container where end-user can sign their name as a verified signature inside the container.
SliderThe slider component allows you to select a value or range of values between the min and max range.
SmithChartTool for visualizing the data of high frequency circuit applications. It contains two sets of circles to plot parameters of transmission lines.
SparklineVery small chart control drawn without axes or coordinates. The sparklines are easy to interpret and convey more information to users by visualizing data in a small amount of space.
SplitButtonSplitButton has primary and secondary button. Primary button is used to select default action and secondary button is used to toggle contextual overlays for displaying list of action items.
SpreadsheetThe Spreadsheet component is used to organize and analyze data in tabular format. It has a built-in calculation library that supports most commonly used formulas.
StockChartA chart used to visualize stock data.
SymbolPaletteThe Palette shows a set of nodes and connectors. It allows you to drag and drop the nodes and connectors into the Diagram.
TimePickerTime picker is a simple and intuitive interface component that allows selection of a time value from the popup list or setting a desired time value.
ToolbarDisplays a group of command buttons arranged horizontally.
TreeGridThe TreeGrid component is a feature-rich control used to visualize self-referential hierarchical data effectively in a tabular format.
TreeMapThe tree map control provides a simple and effective way to visualize flat or hierarchical data as clustered rectangles with a specific, weighted attribute determining the size of each rectangle.
TreeViewThe TreeView component is used to represent hierarchical data in a tree like structure with advanced functions to edit, drag and drop, select with CheckBox and more.
UploaderThe uploader component allows to upload images, documents, and other files from local to server.

Implements​

NameDescription
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable