Can't figure out this one

[frankbicknell]

I would like to have a show hide section on each row of a tabular grid. I want to hide certain fields unless they are needed then show them with a button click.

Here is what I have figured out so far in the onclick event of a button.

var rowNum = {Grid.RowNumber}+'';
var cObject = 'detailsDiv'+rowNum;
//alert(cObject);
var oDivEle = $(cObject);
	if(oDivEle.style.display == 'block') {
    		oDivEle.style.display = 'none';
		this.innerHTML='SHOW DETAILS';
  	}
	else {
		oDivEle.style.display = 'block';
		this.innerHTML='HIDE DETAILS';
	}

This works ok. It shows and hides the div in the first row. The id changes to reflect the current row.

Here is where I am stuck.

This code is in a freeform area of a field.

<div id="detailsDiv1" style="display:none;">
<table>
	<tr>
	<td>{problem}</td>
</tr>
	<tr>
	<td>{action}</td>
</tr>
	<tr>
	<td>{rrepairs}</td>
</tr>

Again this works Ok for the first row. What I need to do is dynamically change the row number to match the row of the grid for example <div id = "detailsDiv1" , <div id = "detailsDiv2" ,<div id = "detailsDiv3" , etc.

If anyone can give me some hints I would much appreciate it. Maybe I am approaching this from the wrong angle.

[frankbicknell]

Re: Can't figure out this one

Update, this does put the dynamic id into a js variable. How can I use that variable to set the div id in the html?

added in the freeform area

<script type="text/javascript">
<!--
var rowNum = {Grid.RowNumber}+'';
var cDivId = 'detailsDiv'+rowNum;
//alert(cDivId);
-->
</script>

This works but I can't get the fields to display instead of the text.

this works.
document.write("<div id='"+cDivId+"' style='display:none'><table><tr><td>what</td></tr><tr><td>the</td></tr><tr><td>heck</td></tr></table></div>");

this does not
document.write("<div id='"+cDivId+"' style='display:none'><table><tr><td>{problem}</td></tr><tr><td>{action}</td></tr><tr><td>{rrepairs}</td></tr></table></div>");
nor this
document.write("<div id='"+cDivId+"' style='display:none'><table><tr><td>"+{problem}+"</td></tr><tr><td>"+{action}+"</td></tr><tr><td>"+{rrepairs}+"</td></tr></table></div>");

[Davidk]

Re: Can't figure out this one

Hey Frank,

You won't need to do the JS thing. Use some "data" in your freeform HTML code instead. You can use your Record Id... anything unique will do. This code is using my fields, but that has no effect. Don't use a div id, I don't think you need it and I believe it sets up the fields just for the first row. I've tried using {data.<RowNumber>} and variations of it, but can't get it to behave. If you use your record id, change your button code to pick up the data you need.

<table id="detailsDiv{data.Member_id}" style="display:none;">
<tr>
	<td>{Member_id}</td>
</tr>
	<tr>
	<td>{First_name}</td>
</tr>
	<tr>
	<td>{Last_name}</td>
</tr>
</table>

[frankbicknell]

Re: Can't figure out this one

Thanks David, I will try this later. Now off to work.

[frankbicknell]

Re: Can't figure out this one

Thanks again David but I was your suggestion to work for me.
Got this to work though. In the freeform edit region of the button. It dirties the fields when changed and enables the submit button like I wanted.

<script type="text/javascript">
<!--
var rowNum = {Grid.RowNumber}+'';
var cDivId = 'detailsDiv'+rowNum;

document.write("<div id='"+cDivId+"' style='display:none'></div>");

$(cDivId).innerHTML = '<table><tr><td>{problem}</td></tr><tr><td>{action}</td></tr><tr><td>{rrepairs}</td></tr></table>';
-->
</script>

[frankbicknell]

Re: Can't figure out this one

Well as it sometimes goes in Alpha. My script worked well in all of the preview modes but not when published. I couldn't figure out why. I was able to come up with an alternative however. I am using the showhide expression in the fields which is set to show when a condition is true and hide when it is false controlled by a button. This was the simplest solution.

[frankbicknell]

Re: Can't figure out this one

Since I am not able to experiment with Alpha as often as I would like lately it seems like I am getting 'rusty'.

If I am using the showhide expression in a field and the expression evaluates to false the field is not shown. Shouldn't the freeform template for that field also not be shown?

If the showhide expression evaluates to false the field is not shown but all of the code in the freeform template is still displayed. Is this a bug or is that the way it should work?

[Davidk]

Re: Can't figure out this one

Frank,

Is this what you want to do? Have 3 fields in a column freeform area. Changes to any of these fields must enable the submit buttons. This column will show or hide based on an expression. Attached are screen shots that might help. Two of the 3 fields I have hidden. The 3rd field is the one used for the freeform section.

[frankbicknell]

Re: Can't figure out this one

David that is very generous of you to take time to help me solve this issue.

Your method is the way in which I started out. However when you add labels to the hidden fields, eg. a row tag above the field, the labels show no matter what the Show/Hide expression evaluates to. It seems to me if you have the field hidden the freeform template for that field should be hidden too.

This is what I have settled on for now. I am using a form(columnar) grid. It is not perfect yet. I am using a dummy bit field in the Show/Hide expression which ends up causing the grid to become dirty just by clicking on the image to show the hidden fields. I hope I can figure out how to do it with a variable. Also I would like to use the freeform template with labels to make the grid look better.


This is the code in the onclick event of the image I use to show the details. The setValue function causes a callback that evaluates the showhide expressions and shows or hides the fields accordingly.

var lShowDetails = {grid.Object}.getValue('G','SHOWDETAILS',{Grid.RowNumber});
	if(lShowDetails == 1) {
		{grid.Object}.setValue('G','SHOWDETAILS',{Grid.RowNumber},0);
		this.src = 'Zoom in.png'
  	}
	else {
		{grid.Object}.setValue('G','SHOWDETAILS',{Grid.RowNumber},1);
		this.src = 'Zoom out.png'
	}

This is the show/hide property in the field I am hiding
7-3-2011 7-43-15 AM.png

Here is the result.
7-3-2011 7-23-15 AM.png 7-3-2011 7-28-02 AM.png

[Davidk]

Re: Can't figure out this one

Nice looking forms, Frank. I didn't know about the labels... now I see it.

[frankbicknell]

Re: Can't figure out this one

Finally figured it out. At least for my taste. I guess I over analyzed it at first. It was there in Alpha all the time. I ended up using a form type grid with accordion tabs. It makes the rows a little larger than I wanted but it works well, requires little coding, and gets the job done.

I can have them all closed.
7-10-2011 9-55-53 AM.png

or expanded.
7-10-2011 9-56-22 AM.png