Skip to main content

Telerik KendoUI

Kendo UI for jQuery is Progress Telerik's JavaScript suite: a data grid, charts and gauges, scheduler, Gantt, spreadsheet, rich text and image editors, PDF viewer, org chart and a full set of editors and navigation widgets. The Wisej.Web.Ext.Kendo extension wraps 49 of them as Wisej.NET controls.

A Kendo UI dashboard with a user panel, task counters, a gauge and a line chart of total points by month

A Kendo UI dashboard (image: Progress Telerik).

Installation​

dotnet add package Wisej-4-Kendo

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

Kendo UI requires a Telerik licence

Kendo UI is a commercial product of Progress Telerik. You need a Kendo UI licence, which is separate from your Wisej.NET licence. Your Wisej.NET licence must also include the premium extensions. Recent Kendo UI releases also check a licence key in the browser, and show a watermark and a console warning without one. Put your script key in the configuration file. The wrapper registers it with KendoLicensing.setScriptKey():

Wisej.Web.Ext.Kendo.json
{
  "source": "cdn",
  "theme": "bootstrap-main",
  "licenseKey": "YOUR-KENDO-UI-SCRIPT-KEY",
  ...
}

Alternatively, load Telerik's telerik-license.js as a package. The default configuration file has the entry commented out, ready to enable. See the Kendo UI licensing documentation.

By default the scripts come from the Kendo CDN, version 2023.1.117: jQuery, kendo.all.min.js, JSZip for Excel export, PDF.js for the PDF viewer, the theme, and the culture and message files for the current culture. See Configuration to change the version or serve the files yourself.

How the wrapper works​

Every widget derives from kendoBase, which derives from the Wisej.NET Widget. Each class has the name of the jQuery plugin it creates, kendoGrid, kendoChart, kendoScheduler and so on, which is also the name the Kendo UI API reference uses, without the kendo prefix.

  • Kendo configuration goes into Options.
  • Kendo methods are called through Instance.
  • Kendo events are bound with the widget's bind(), so server handlers use Kendo's event names (change, dataBound, save) and several handlers can listen to the same event. See Events.

Some Kendo widgets must be created on a specific element. The wrappers of kendoDatePicker, kendoDateTimePicker, kendoTimePicker, kendoAutoComplete, kendoSlider, kendoCaptcha and kendoForm create that element for you.

Getting started​

using Wisej.Web.Ext.Kendo;

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

grid.Options = new
{
    dataSource = new
    {
        data = new[] {
            new { ProductID = 1, ProductName = "Chai", UnitPrice = 18.00, Discontinued = false },
            new { ProductID = 2, ProductName = "Chang", UnitPrice = 19.00, Discontinued = false },
            new { ProductID = 3, ProductName = "Aniseed Syrup", UnitPrice = 10.00, Discontinued = true }
        },
        pageSize = 20
    },
    sortable = true,
    pageable = true,
    selectable = "row",
    columns = new object[] {
        new { field = "ProductName", title = "Product" },
        new { field = "UnitPrice", title = "Price", format = "{0:c}", width = 120 },
        new { field = "Discontinued", width = 120 }
    }
};

// https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/grid/events/change
grid.Instance.onChange += new WidgetEventHandler(async (s, e) =>
{
    // The change event carries no row data. Ask the grid for the selected rows.
    var rows = await grid.Instance.selectAsync();
});

this.Controls.Add(grid);
Read values back explicitly

Kendo events often report only that something changed, not the new value. Read the value with a method call, such as await widget.Instance.valueAsync(), or return exactly what you need from a widget function that runs in the browser.

Kendo templates, for example rowTemplate or a column template, can refer to a <script> block by id ("#rowTemplate"). Register those blocks with WidgetTemplates. Their default type is text/x-kendo-template, the one Kendo expects. See Templates.

Widgets​

AreaClasses
DatakendoGrid, kendoTreeList, kendoPivotGrid, kendoPivotGridV2, kendoTreeView, kendoTaskBoard, kendoOrgChart, kendoSpreadsheet
Charts and gaugeskendoChart, kendoStockChart, kendoSparkline, kendoTreeMap, kendoMap, kendoDiagram, kendoArcGauge, kendoLinearGauge, kendoRadialGauge, kendoBarcode, kendoQRCode
SchedulingkendoScheduler, kendoGantt, kendoCalendar, kendoMultiViewCalendar, kendoTimeline
EditorskendoDatePicker, kendoDateTimePicker, kendoTimePicker, kendoDateRangePicker, kendoAutoComplete, kendoDropDownList, kendoDropDownTree, kendoMultiSelect, kendoMultiColumnComboBox, kendoSlider, kendoRangeSlider, kendoSwitch, kendoRating, kendoForm, kendoCaptcha
Documents and mediakendoEditor, kendoImageEditor, kendoPDFViewer, kendoFileManager, kendoMediaPlayer
Navigation and flowkendoDrawer, kendoBreadcrumb, kendoStepper, kendoWizard, kendoChat

Date and time pickers​

kendoDatePicker, kendoDateTimePicker and kendoTimePicker add a typed Value property of type DateTime. It's a shortcut for Options.value: setting it updates the picker in the browser. The property isn't updated when the user picks a date, so read the user's choice with await picker.Instance.valueAsync(), or in a change handler.

this.kendoDatePicker1.Value = DateTime.Today.AddDays(7);

this.kendoDatePicker1.Instance.onChange += new WidgetEventHandler(async (s, e) =>
{
    var picked = await this.kendoDatePicker1.Instance.valueAsync();
    this.labelDue.Text = "Due " + picked;
});

Themes and localization​

kendoBase.Theme selects the Kendo theme: the value becomes styles/kendo.<theme>.min.css, as in bootstrap-main, default-main, material-main or fluent-main. kendoBase.Culture loads kendo.culture.<culture>.min.js and kendo.messages.<culture>.min.js, and switches the Kendo culture to match, so dates, numbers and built-in texts follow the user's language. See Themes and Localization.

kendoBase.Theme = "fluent-main";
kendoBase.Culture = new CultureInfo("it-IT");

Resources​