Customize the Tree

[gokulParticipant]

Hai,

Currently I have one issue with jqxTree control. Ok.

Now we come to my scenario, I have the menu structure list the below, (consider this menu structure is come from database)

var data = [
				{
					"id": "1",
					"parentid": "0",
					"text": "Item 1",
					"file_path": "item_1.htm",
					"page_heading": "Item 1 - Title"
				},
				{
					"id": "2",
					"parentid": "0",
					"text": "Item 2",
					"file_path": "item_2.htm",
					"page_heading": "Item 2 - Title"
				},
				{
					"id": "3",
					"parentid": "1",
					"text": "Item 1 - 1",
					"file_path": "item_1_1.htm",
					"page_heading": "Item 1 - 1 - Title"
				},
				{
					"id": "4",
					"parentid": "1",
					"text": "Item 1 - 2",
					"file_path": "item_1_2.htm",
					"page_heading": "Item 1 - 2- Title"
				},
				{
					"id": "4",
					"parentid": "2",
					"text": "Item 2 - 1",
					"file_path": "item_2_1.htm",
					"page_heading": "Item 2 - 1 - Title"
				}
		];

and then, I have populate the Tree. – I have done. But,

Now my question is, based on the item click I have to load the correspondent file into panel and the heading of the page will be from the menu structure.

Please help me out to do this.
Thanks,
Gokul

[Peter StoevKeymaster]

Hi Gokul,

See this jqxTree sample which shows how to dynamically add content depending on the clicked Tree item: navigation.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gokulParticipant]

Peter Stoev,

Thanks for you quick replay.

Your example is like my scenario. I have left side panel and right side panel between i have splitter.

But I need some example about to load the menu structure from the database and generate the tree. In the tree item I have store some custom data filed like “file_path”: “item_1_2.htm”, “page_heading”: “Item 1 – 2- Title” and when click the item I have to load the correspondent html page in the right side panel.

Thanks,
Gokul

[Peter StoevKeymaster]

Hi Gokul,

Here’s another sample which loads data from files depending on selected tree item: tree with splitter

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gokulParticipant]

Hai Peter Stoev,

Thanks for you quick replay.

In your navigation example ( http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/navigation.htm?classic ).

When I reduce the left-side panel size I can able to see the scrollbar (tree has the fixed size) but when I do the same in right-side panel the scrollbar is not coming. so my below table structure is automatically reduced the size ex. country code, country name comes into two lines..

Country Code

Country Name

Please help me solve this issue.

Thanks,
Gokul

[Peter StoevKeymaster]

Hi Gokul,

The Tree in the sample is not with fixed size. Its size is set in percentages and especially to 100% i.e to fit to its container. That’s why when the container’s size is changed, the tree is resized, too and displays scrollbars if necessary. Please, send me a sample code which reproduces the behavior that you experience so I can test with it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts