newbie question: touch and a grid

I am evaluating the DHTMLX touch and grid library and i can not get the grid to be shown when using a touch side menu.

The default page is a clone of the touch documentation on this page:

On a linked page, I want to have a grid, but it is not rendering.
The _TopBar and _BottomBar display properly and are the right distance apart.

When I call the page directly (bypassing the menu) the grid is on the page.

Any help would be appreciated.

The grid page:



The components belong to different libs, so work together not so smoothly.
You can do the next

$$('parent_view').attachEvent("onViewChange", function(){ //when grid is visible mygrid.setSizes(); });

Where should this code snippet go?
It throws an error if placed either in the default page that sets up the menu, or on the start.html that hosts the grid?

after dhx.ui call ( if you are using touch lib )

That would not work because the
is on the default page that creats the framework, while the grid is only defined on the loaded from the doc_path (e.g. start.html)

the default page code I am using is:


	<title>Demo Number Two</title>

	<style type="text/css" media="screen">
			margin:0px !important;

	<script type="text/javascript">
	    var page_history = [];
	    var hidden = false;
	    var doc_path = "./SummaryRpts/";
	    dhx.ready(function () {
	        var config = {
	            id: 'app',
	            view: 'layout',
	            rows: [
					    view: 'layout',
					    type: 'wide',
					    cols: [
							    id: 'articles_list',
							    view: 'grouplist',
							    datatype: 'xml',
							    url: 'Contents.xml',
							    templateItem: "#title#",
							    templateGroup: "#title#",
							    templateBack: "#title#",
							    align: 'left',
							    select: true,
							    type: {
							        width: 320,
							        height: 22,
							        padding: 10,
							        align: 'left'
							    view: 'layout',
							    rows: [
									    view: 'toolbar',
									    type: 'MainBar',
									    elements: [
											    id: 'hide',
											    view: 'button',
											    label: 'Hide TOC',
											    width: 120
											}, {
											    id: 'article_title',
											    view: 'label',
											    label: ''
											}, {
											    width: 100
											}, {
											    id: 'back',
											    view: 'button',
											    label: 'Back', type: "prev",
											    width: 80
									}, {
									    view: "template",
									    id: "article",
									    scroll: "yx",
									    src: doc_path + "start.html"


	        $$("articles_list").attachEvent("onItemClick", function (id) {
	            openPage(id, true, false);
	        $$("articles_list").attachEvent("onXLE", function (id) {
	            openPage("start.html", true);
	        $$("back").attachEvent("onItemClick", function () {
	            if (page_history.length > 1) {
	            } else
	                dhx.notice("History is empty");
	        $$("hide").attachEvent("onItemClick", function () {
	            if (hidden === true) {
	                // show
	                this.define('label', 'Hide TOC');
	                hidden = false;
	            } else {
	                this.define('label', 'Show TOC');
	                hidden = true;

	    function openPage(id, skip_list, skip_history) {
	        if (!id) return false;
	        id = id.replace(/#.*$/g, "");
	        var cont = $$('article');
	        var title = $$('article_title');
	        var list = $$('articles_list');

	        if (!skip_history)
	            if (!page_history.length || page_history[page_history.length - 1] != id)

	        var item = list.item(id);
	        if (item) {
	            title.define('label', item.title);
	            cont.define('src', doc_path +;
	            if (!skip_list) {



The main idea of above solution, you need to call setSizes of grid method, when grid view is made visible ( not necessary for native dhtmlx touch grid, but dhtmlx3 grid has a different logic )