Skip to main content

Syncfusion EJ1

Essential JS 1 (EJ1) is Syncfusion's earlier, jQuery-based JavaScript suite: grids, charts, gauges, scheduler, Gantt, diagram, pivot components, editors and more. The Wisej.Web.Ext.Syncfusion extension wraps 54 of its widgets as Wisej.NET controls.

Legacy suite: use EJ2 for new applications

Syncfusion has moved development to Essential JS 2, its modern suite with no jQuery dependency, and recommends it for new projects. The extension's default configuration loads EJ1 version 19.3.0.43, a 2021 release. Keep this extension for existing applications built on EJ1, and plan the move to Syncfusion EJ2, whose Wisej.NET wrapper works the same way.

Installation​

dotnet add package Wisej-4-Syncfusion

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

Syncfusion licence required

EJ1 is a commercial product. You need a Syncfusion licence, which is separate from your Wisej.NET licence. Your Wisej.NET licence must also include the premium extensions. The EJ1 wrapper has no licenseKey setting.

By default the scripts come from the Syncfusion CDN: jQuery 3.6, jQuery Easing, JsRender, and the ej.web.all bundle with its theme stylesheet, plus the culture and localization files for the current culture. See Configuration to serve them yourself.

How the wrapper works​

Every widget derives from ejBase, which derives from the Wisej.NET Widget. Each class has the name of the jQuery plugin it creates, ejGrid, ejChart, ejSchedule and so on, so the EJ1 API reference is also the reference for these classes. The one exception is ejRichTextEditor, which creates EJ1's ejRTE.

  • EJ1 options go into Options.
  • EJ1 methods are called through Instance.
  • EJ1 events are options that take a callback. The wrapper sets that option when you attach a handler. See Events.
One server handler per event

Because an EJ1 event is a single option, attaching a server handler replaces any callback already set for that event, including one set through WidgetEvents. Detaching sets the option to null. Use either a server handler or a JavaScript handler for each event, not both.

Getting started​

using Wisej.Web.Ext.Syncfusion;

var grid = new ejGrid { Dock = DockStyle.Fill };

grid.Options = new
{
    dataSource = new[] {
        new { OrderID = 10248, CustomerID = "VINET", Freight = 32.38 },
        new { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61 }
    },
    allowPaging = true,
    allowSorting = true,
    columns = new object[] {
        new { field = "OrderID", headerText = "Order", isPrimaryKey = true },
        new { field = "CustomerID", headerText = "Customer" },
        new { field = "Freight", format = "{0:C2}", textAlign = "right" }
    }
};

// https://help.syncfusion.com/api/js/ejgrid#events:rowselected
grid.Instance.onRowSelected += new WidgetEventHandler((s, e) =>
{
    AlertBox.Show("Selected order " + e.Data.data.OrderID);
});

this.Controls.Add(grid);

EJ1 templates are JsRender <script> blocks referred to by id. Register them with WidgetTemplates, whose default type, text/x-jsrender, is the one EJ1 expects. See Templates.

Widgets​

AreaClasses
DataejGrid, ejTreeGrid, ejPivotGrid, ejPivotClient, ejPivotChart, ejPivotTreeMap, ejPager, ejListBox, ejListView, ejTreeView, ejKanban
Charts and gaugesejChart, ejSparkline, ejBulletGraph, ejSunburstChart, ejHeatMap, ejHeatMapLegend, ejTreeMap, ejCircularGauge, ejLinearGauge, ejDigitalGauge, ejTagCloud
SchedulingejSchedule, ejGantt, ejRecurrenceEditor
Documents and diagramsejSpreadsheet, ejPdfViewer, ejRichTextEditor, ejDiagram, ejSymbolPalette, ejOverview, ejFileExplorer, ejSignature, ejBarcode
EditorsejAutocomplete, ejComboBox, ejDropDownList, ejDropDownTree, ejDatePicker, ejDateRangePicker, ejDateTimePicker, ejTimePicker, ejNumericTextBox, ejCurrencyTextbox, ejPercentageTextbox, ejMaskEdit, ejCheckBox, ejColorPicker, ejRating, ejSlider
OtherejToolbar, ejTile, ejRotator, ejMediaPlayer

Classes with extra members​

ClassExtra members
ejChartExportImage(Action<Image> callback) and ExportImageAsync() return the rendered chart as a System.Drawing.Image on the server, for example to save it or put it in a report.
ejBarcodeText (the encoded value) and ForeColor (the bar color) as ordinary control properties.
ejRichTextEditorSetting Text loads HTML into the editor. The property isn't updated from the browser: read the user's edits with await ejRichTextEditor1.Instance.getHtmlAsync().
// Save the chart as a PNG on the server.
var image = await this.ejChart1.ExportImageAsync();
image.Save(Application.MapPath("~/exports/chart.png"), ImageFormat.Png);

Themes and localization​

ejBase.Theme selects the EJ1 theme folder, such as flat-azure, bootstrap-theme, office-365 or material. The value replaces %theme% in the stylesheet URL. ejBase.Culture selects the culture files (ej.culture.<culture>.min.js, ej.localetexts.<culture>.min.js) and the culture passed to the widgets. See Configuration.

Resources​