Hello,
I have encountered a bug in webix that I can only reproduce in electron environment:
Put a toolbar (or any view) and a data table in rows. Datatable must have a small number of rows so it does not fill all vertical space.
With your mouse, scroll the data table and then click on any row to select it
webix throws the following error:
Uncaught TypeError: Cannot read property 'id' of undefined
at h.nl (webix_debug.js:22077)
at h.kl (webix_debug.js:22153)
at hl (webix_debug.js:22013)
at h.bl (webix_debug.js:22102)
at h.<anonymous> (webix_debug.js:248)
at h.iA (webix_debug.js:21329)
at h.Yc (webix_debug.js:21384)
at h.Sc (webix_debug.js:6743)
at HTMLDivElement.<anonymous> (webix_debug.js:248)
To reproduce:
Create a new folder, let’s call it scroll
Cd to scroll
run npm init and choose defaults
run npm install --save-dev electron
run npm install webix
edit file package.json and add “start”: “electron .” to “scripts”
create a file index.js and add the following content:
const app = require('electron').app;
const BrowserWindow = require('electron').BrowserWindow;
let win;
function createWindow () {
win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile('index.html')
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
Create file index.html with the following content:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./node_modules/webix/webix.css" type="text/css" charset="utf-8">
<title>Scroll</title>
</head>
<body>
<div id="settings-container" style="width: 800px;"></div>
<script src="./node_modules/webix/webix.js" type="text/javascript" charset="utf-8"></script>
<script src="./app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
and finally create a file app.js with the following content:
const grid_data = [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4},
{ id:5, title:"My Fair Lady", year:1964, votes:533848, rating:8.9, rank:5},
{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6}
];
webix.ui({
rows: [
{
id: 'panel-1',
type: "clean",
rows: [
{ template: "Pnael",
},
{
view: "datatable",
id: 'tbl-1',
select: "row",
multiselect: true,
scrollX: true,
columns:[
{ id:"rank", header:"", css:"rank", width:50},
{ id:"title", header:"Film title",width:200},
{ id:"year", header:"Released" , width:80},
{ id:"votes", header:"Votes", width:100}
],
data:grid_data,
},
],
},
],
});
Now run the application using npm startfrom the command line and use the steps described at the beginning te reproduce the bug.