Using UIManager.addHotKey in Webix Jet

Webix JS
#1

I tried to create a datatable which automatically adds rows.

Here is the code for adding rows automatically:
https://snippet.webix.com/kxpxto8k

In Webix Jet, I included addHotKey inside webix.ready. However, it gives me an error after pressing Enter in the datatable UI editor: “Invalid ID for updateItem.”

if (!BUILD_AS_MODULE){
	webix.ready(() => {
		new MyApp().render();

		// Enter - edit selected row or cell on enter
		webix.UIManager.addHotKey("enter", function(view){
		    var id = view.getSelectedId();
		    console.log("id",id);
		    if (id) view.editCell(id.row,id.column);
		}, 'datatable');
	});
}

How do I make editing the datatable work successfully with Webix Jet?

#2

Hey @franznoel, I’ve tried running the small sample locally. Simply including the Enter hotkey functionality will work just fine. I am not sure about the rest of your code, but it would really help if you could provide the example of your Jet app structure. As I’ve said, just the small isolated sample with a hotkey attached on the app level worked just fine, most likely the issue is somewhere else in the code.

Also, seeing as you have debug enabled, perhaps you could check the debug log to see where the issue is originating from as well?

#3

Hi @Dzmitry, Here is a sample code:
https://github.com/fritzdenim/webix-jet

The only thing that needs to be noted here are the following files:

  • sources/myapp.js
  • sources/views/data.js

Solution:
After looking more at my codes, I fixed it by adding to the webix.DataCollection class, rather than in the component.

The codes include a model:

export let data = new webix.DataCollection({ data:[
	{ firstname:"John", lastname: "Smith", birthdate: "1982-02-08" },
	{ firstname:"Samantha", lastname: "Smith", birthdate:  "1970-07-08" },
]});

So, adding to the component does not work like so:

$$("membersTable").add(newMemberData);

Instead, I did it like:

data.add(newMemberData);

(Quite different than Webix)

#4

When you are syncing a component with a DataCollection, you are always supposed to work with the collection, instead of working with the component directly. While synched, all of the data operations are performed in the DataCollection, and not the component. The component is only responsible for the visual representation of that data in this case.