help with tree view control

[Michael1954]

Re: help with tree view control

I have worked through this and can make most things work.

However the onClick and attributes are just not working for me.

I am sure it is a simple syntax problem.

This works

{ icon: \'cssIcon=fa fa-folder\' , collapsedIcon: \'cssIcon=fa fa-folder\', expandedIcon: \'cssIcon=fa fa-folder-open\' , initialState: "open", value: "Hello" }

With the genie I can use the onClick event

So onClick (Genie based) I have

func(this.value);

function func(txt){ alert(txt);} the alert returns "value" the variable "we".

The JSON from the component is

[
{
html: 'parent',
value: 'we',
icon: 'cssIcon=fa fa-glass',
collapsedIcon: 'cssIcon=fa fa-folder',
expandedIcon: 'cssIcon=fa fa-folder-open',
onClick: function(dn) {func(this.value);}, // I cannot get this section to work when I build with xBasic.
children: [
{
html: 'child',
icon: 'cssIcon=fa fa-folder-open'
}
]
}
]




Also I cannot get this to work when passing from the server.


{icon: 'myIconA', onClick: 'alert("You clicked on Alpha-1");'}

[Steve Workings]

Re: help with tree view control

Here's the complete construct from mine - might help?

				ele_value = "G|" + rs.data("Group_Number") + "|" + rs.data("Type") + "|" + rs.data("Value")		'example: G|1|L|3
				*concat(js, "	{" + crlf())
				*concat(js, "		html: '" + rs.data("element_name") + "'," + crlf())
				*concat(js, "		value: '" + ele_value + "'," + crlf())
				if rs.data("Type") = "L"
					*concat(js, "		icon: '" + img_location + "'," + crlf())
				else
					*concat(js, "		icon: '" + img_animal + "'," + crlf())
				end if
				*concat(js, "		onClick: function() {{dialog.object}.buttonClick('BUTTON_CLICKTREE'); }" + crlf())

[frankbicknell]

Re: help with tree view control

Here is a section of my xbasic tree builder code. Maybe you can get something out of this.

	
		if loadTxt03
			txt = txt + "<font class='treeNode1'>WORK ORDERS</font>" + crlf()
			
			sqlStatement = <<%sql%
				select long_tree, slid, logno, fileas, closed from v_cbo_wono where cid = :maCID order by logno desc %sql%
			OK = cn.Execute(sqlStatement,myargs)
			rsc = cn.ResultSet
			
			txt = txt + tab1 + "<font class='treeNodeLabel2'>" + "NEW WORK ORDER RECORD" + "</font>" +\
			"{icon: 'add-16.png', onClick: '{dialog.object}.ajaxCallback(\'\',\'\',\'xbOpenWoAdd\',\'\',\'_nCID="\
			+ rsp.Data(2) + "&_cFileAs=" + rsp.Data(1) + "&_nJID=" + "" + "&_cJname=" + "" + "\') ;'}" + crlf()
			
			while rsc.nextrow()
				txt = txt + tab3 + "<font class='treeNodeLabel2'>"
				
				if rsc.Data(5) = .t.
					txt = txt + tab3 + "<font class='treeNodeLabel3'>"
				end if
				
				txt = txt + rsc.Data(1) +"</font>" +\
				"{icon: 'form2.png', onClick: '{dialog.object}.ajaxCallback(\'\',\'\',\'xbOpenWoEdit\',\'\',\'_nCID="\
				+ rsp.Data(2) + "&_nSlID=" + rsc.Data(2) + "&_cWoNo=" + rsc.Data(3) + "&_cFileAs=" + rsc.Data(4) + "\') ;'}" + crlf()
			end while ' work orders
		end if

[Steve Workings]

Re: help with tree view control

Frank (and anyone else) --

After I posted mine, and after reading yours, I think even simpler syntax could be to call a saved javascript action. That way all we have to do is call

{dialog.object}.runAction('MyAction');

It's what I'm aiming for next time, and maybe amend my current stuff one of these days. It should simplify the coding here somewhat.

[frankbicknell]

Re: help with tree view control

I agree only I am not sure of how to pass the data from the select statement to the action Javascript. It certainly would make the code much easier to read.

The way I have it working is that I take the data submitted in the callback set session variables in the callback that are then used in the action javacript to open the correct ux for adding or editing.

It seems that there is a step that is not necessary but that is the only way I can make it work for me now.

I wonder if I can set session variables and run the action jacascript without a callback in the onClick...hmmm......

[frankbicknell]

Re: help with tree view control

This approach is working OK

I have added a couple of client side hidden controls in the tree view ux to accept the data and to set the arguments in the child ux. No callback needed here.

txt = txt + tab1 + "<font class='treeNodeLabel2'>" + "NEW JOB RECORD" + "</font>" +\
"{icon: 'add-16.png', onClick: '{dialog.Object}.setValue(\'cid\',"+ rsp.Data(2) +");{dialog.object}.runAction(\'open_job_add\');'}" + crlf()

[frankbicknell]

Re: help with tree view control

Just an fyi for anyone experimenting with the treeview control.

I have found that there is a limit to the number of characters you can have in any particular branch statement. I guess it is 254. If you go above that the tree will not render and you get no errors.

[Steve Workings]

Re: help with tree view control

Frank - most of us know that's another way of saying "geez did I spend a lot of time to figure *that* out!". All the more reason to get what you can of this to call some saved javascript action or similar.

Thanks.

[frankbicknell]

Re: help with tree view control

yes after "i spent a lot of time figuring this out" I have it working very well now. It is smooth and very fast, functional and they like it..

[gregincolumbus]

Re: help with tree view control

Is there a way to refresh just the tree control?

[frankbicknell]

Re: help with tree view control

What I do is just make an ajaxcallback to the function that builds the tree.

[gregincolumbus]

Re: help with tree view control

Thanks Frank......mine is a basic static tree control I am using for a nav menu in a mobile app. I ended up just adding an e.url after login event that basically forces the page to refresh.

I am using security groups on some of the tree control choices and even though I logged in, the security wasn't being recognized without a refresh. I would love if the nested list genie or the viewbox control had security group options applied to them, but so far it only appears in the tree control. Seems like this would be a common need for developers.......maybe I am missing something obvious???

[CampnJim]

Re: help with tree view control

Hi Frank,
How did you get the different font styles on the tree nodes?

[frankbicknell]

Re: help with tree view control

I have put the tree control aside for now. It was too cumbersome and hard to maintain for me and I was not able to get the results that I wanted. You can specify fonts in the code that builds the tree structure. I created some different 'font' classes and set the font classname in the HTML code.