[SOLVED] Problems with ODATA and Electron


#1

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:

file://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers?$callback…112302716272788296388_1464613738558&%24inlinecount=allpages&%24format=json
Failed to load resource: net::ERR_FILE_NOT_FOUND

Here’s the code:

main.js

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

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

app.on('ready', () => {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL(`file://${__dirname}/kendo.html`);
  mainWindow.openDevTools();
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

kendo.html

<!DOCTYPE html>
<html>
    <head>
        <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>
    </head>
    <body>
        <a class="offline-button" href="../index.html">Back</a>
            
        <div id="example">
            <div id="grid"></div>
            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        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
                        }]
                    });
                });
            </script>
        </div>

        <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;
            }
        </style>
    </body>
</html>

#2

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).

BEFORE

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

AFTER

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

#3

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.