Electron

Electron is a framework for creating native desktop applications with web technologies like JavaScript, HTML, and CSS.

Adding CSS and JavaScript References

To use Kendo UI in your Electron projects, include the required JavaScript and CSS files.

Using Local Files

Due to the Node.js integration of Electron, some extra symbols were inserted into the DOM—module, exports, and require. To include the scripts, use the require symbol.

Example
<link href="lib/css/kendo.common.min.css" rel="stylesheet">
<link href="lib/css/kendo.rtl.min.css" rel="stylesheet">
<link href="lib/css/kendo.default.min.css" rel="stylesheet">
<link href="lib/css/kendo.mobile.all.min.css" rel="stylesheet">

<script>window.$ = window.jQuery = require('./lib/js/jquery.min.js');</script>
<script>require('./lib/js/kendo.all.min.js')</script>

Using CDN Services

Before you include the jQuery library, unset module.

Example
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">

<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script></head>
<script>if (window.module) module = window.module;</script>

Basic Usage

The following example assumes that the Kendo UI scripts and stylesheets were added to the document.

Example
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    columns: [
        { field: "name" },
        { field: "age" }
    ],
    dataSource: {
        data: [
            { name: "Jane Doe", age: 30 },
            { name: "John Doe", age: 33 }
        ]
    }
});
</script>

Application Distribution

For more information on how to distribute your application with Electron, refer to the official Electron documentation on application distribution.

Alternatively, you can use a third-party packaging tool such as:

Sample Application

The sample application is aimed at executives, analysts, or sales representatives. It helps them establish targets based on insights into historical data as well as track sales and product performance in real time. The sample application showcases some of the most popular Kendo UI widgets, such as the Scheduler, Grid, TabStrip, Charts, and Map in a real world scenario. It has a simple and responsive UI based on Bootstrap and works on a wide range of devices.

See Also

In this article
Not finding the help you need? Improve this article