newbie question: touch and a grid

Discontinued products DHTMLX Touch
#1

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:
http://dhtmlx.com/touch/samples/apps/docs/index.html

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.

/Steve
The grid page:

[code]

TopBar
BottomBar
[/code]
#2

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(); });

#3

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?

#4

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

#5

That would not work because the
dhx.ui(config);
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:

[code]



	<title>Demo Number Two</title>

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

	<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"
									}
								]
							}
						]
					}
				]
	        }

	        dhx.ui(config);

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

	    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)
	                page_history.push(id);

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

	    }

	</script>
[/code]
#6

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 )