.show() and .hide() not working on data tables.

I have a JavaScript function that takes input from a combo box and then based on that input should show a certain datatable. I’ve removed the columns on my datatable(s) to make this post a little more manageable.

As you can see on the page load I call viewChange() with a value =1. This should make my accountDatatable show and set the url for the data store. However when I run this nothing happens. It works properly for showing/hiding my toolbars.

Any help would be very much appreciated.

<body onload="viewChange(1);">
	<div id="grid" style="width: 100%; height: 100%;">
    <script type="text/javascript" charset="utf-8">
    function viewChange(value){
    	if (value == 8){
    		$$("devicesToolbar").show();
    		$$("accountsToolbar").hide();
    		$$("deviceDatatable").define("url", "inc/template.php?list=device_list");
    		$$("accountDatatable").hide();
    		$$("deviceDatatable").show();     		
    	}
    	else if (value == 1) {
    		$$("devicesToolbar").hide();
    		$$("accountsToolbar").show();
    		$$("accountDatatable").define("url", "inc/template.php?list=all_accounts");
    		$$("deviceDatatable").hide();
    		$$("accountDatatable").show();
    	}
    	else {
    		webix.message("Value was changed "+value);
    	}
    };

	webix.ui({
			container:"grid",
		  rows:[
		  { 
		      	view:"toolbar",
			    id:"comboToolbar",
			    hidden: false,
			    //These are the columns for my toolbar.
			    cols:[
					    //This is the combobox on the toolbar
				        {view:"combo", id:'account_view', label: 'Select View', labelWidth:85, width:250, 
				        value:1, 
				        on:{ "onChange":function(value){viewChange(value);}},	
				        options:[]},
			        ]
		    },
		      { 
		      	view:"toolbar",
			    id:"accountsToolbar",
			    hidden: true,
			    //These are the columns for my toolbar.
			    cols:[ ]
		    },
		    { 
		      	view:"toolbar",
			    id:"devicesToolbar",
			    hidden: true,
			    //These are the columns for my toolbar.
			    cols:[]
		    },
		      { 

		      	view:"datatable",
		      	id: "accountDatatable",
		      	select:"row",
		      	hidden: true,
		      	scrollY: true,
		      	scrollX: true,
			columns:[],
		      },
		      { 
		      	view:"datatable",
		      	id: "deviceDatatable",
		      	select:"row",
		      	hidden: true,
		      	scrollY: true,
		      	scrollX: true,
			columns:[],
		      }
		  ]

		});

By reversing the order of my .show() and .hide() functions withing viewChange() I was able to get this working.

I can confirm the issue.
If height is not defined for elements the layout may collapse after view hiding. We will fix it in the Webix 2.4.