[SOLVED] Problems with ODATA and Electron


Electron: 1.0.2
OS: Windows 10

I’m evaluating using Electron, Angular, and Telerik KendoUI.

I can get most of the KendoUI demos to work in Electron, but not the most important one - a grid example using remote data via odata.

I can put the code into an HTML file and run it on my local Web server, but when I insert that same code into an electron window, I see the following error in Developer Tools:

Failed to load resource: net::ERR_FILE_NOT_FOUND

Here’s the code:


const {app, BrowserWindow} = require('electron');
var mainWindow = null;

app.on('window-all-closed', () => {
  if (process.platform != 'darwin') {

app.on('ready', () => {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.on('closed', () => {
    mainWindow = null;


<!DOCTYPE html>
        <title>Welcome to Kendo UI!</title>
        <script src="js/jquery.min.js"></script>
        <script>window.jQuery = window.$ = typeof module === 'object' ? module.exports : jQuery</script> 

        <link href="styles/kendo.common.min.css" rel="stylesheet">
        <link href="styles/kendo.rtl.min.css" rel="stylesheet">
        <link href="styles/kendo.default.min.css" rel="stylesheet">
        <link href="styles/kendo.dataviz.min.css" rel="stylesheet">
        <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet">
        <script src="js/jszip.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
        <script src="content/shared/js/console.js"></script>
        <a class="offline-button" href="../index.html">Back</a>
        <div id="example">
            <div id="grid"></div>
                $(document).ready(function () {
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            pageSize: 10
                        height: 550,
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        columns: [{
                            template: "<div class='customer-photo'" +
                                            "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                        "<div class='customer-name'>#: ContactName #</div>",
                            field: "ContactName",
                            title: "Contact Name",
                            width: 240
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }, {
                            field: "Country",
                            width: 150

        <style type="text/css">
            .customer-photo {
                display: inline-block;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background-size: 32px 35px;
                background-position: center center;
                vertical-align: middle;
                line-height: 32px;
                box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
                margin-left: 5px;

            .customer-name {
                display: inline-block;
                vertical-align: middle;
                line-height: 32px;
                padding-left: 3px;


I was able to resolve this by changing the following line in the Electron app. No idea why it works one way on a Web server (without the protocol designation), and another way in the Electron app (with an explicit protocol designation).


read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"


read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"


Web browsers use relative paths if an absolute path is not specified. When you go to a web site using a browser, your current URL is http:// or https://. So when you specify //demos.telerik.com/etcetcetc it takes the protocol from your current URL and uses that … creating http://demos.telerik.com/etcetcetc. When you are using Electron though, the web page being displayed is loaded using file://somethingsomething, so when you specify //demos.telerik.com/etcetcetc it creates file://demos.telerik.com/etcetcetc, which doesn’t exist.