Using Webix Jet with the new sidebar view

Webix JS
1

I ran then Webix Jet demo and it works fine.
Then, I changed view:“menu” to view:“sidebar”.
First thing I noticed was that it didn’t look good, but that’s just styling.
The sidebar did not work to change the url and navigate the jet demo.
Any suggestions?

2

I would also like an example how to work with the new sidebar view in Webix Jet.

3

For now, I am using the following technique:
I added a “page” property to the submenu items in the sidebar data.
In an onAfterSelect handler, I check for “page” and if it’s there, I app.show it.

...
{ id: "search", value: "Search", page: "search"},
{ id: "account", value: "Account", page: "account"},
...

onAfterSelect: function(id){
	var selection = this.getItem(id);
	webix.message("Selected: "+selection.value);
	if (selection.page) {
		app.show("/top/"+selection.page);
	}
}
4

Hello,

The solution you’ve found is correct. Please take a look at the “In-app navigation” part in Webix Jet docs

5

Thank you for the confirmation, Maria!
To follow up, I’ve also added to top.js an onurlchange handler for selecting the correct menu item in the sidebar on a reload. (Does this look right as well?)

$onurlchange:function(config, url, scope){
	var sidebar = $$("app_sidebar");
	var page = url[0].page;
	if (page) {
		var menuItem = sidebar.getItem(page);
		if (menuItem) {
			var parentId = sidebar.getParentId(page);
			if (parentId) {
				sidebar.open(parentId);
			}
			sidebar.select(page);
		}
	}
	//alert(JSON.stringify(url,null,'\\t'));
}
6

Actually, I had to change my sidebar onAfterSelect handler to be a onItemClick handler. I don’t want the sidebar.select call triggering the onAfterSelect handler.

7

Hi,

The code looks correct.

8

please show full code for top view with sidebar

9

Hi there.

I have a question in general concerning sidebar control. I setup a sidebar with the content container id named “content” which is placed in a div container id named “content-container”.
I want to load some content in this $$(“content”) by release a sidebar onclick event for this I use

$$('content').load("path_to.php", function(text, data, http_request){

});

text is a fully html result! but this doesn’t work!
but when i’m using this:

$$('sidebar').load("path_to.php", function(text, data, http_request){

$('#content-container').html(text);

});

with jquery this works. but my pager for the datatable I just loaded disapears :frowning:

Please give me a hint

Michael

10

Hi @Michael,

Firstly, can you please show a more complex snippet of your code? The issue still seems unclear.

Secondly, what is your data format? By default, Webix expects a json. If you’re loading an html/xml/csv, you need to specify it via the datatype property.

11

Hi Lstopad.
Thank you for your help.
This probleme has been solved :slight_smile:

Michael