Changing the color of a dynamic line item

[Former Community Member]

I have a dynamic form, and when I click on the "Add" button it adds a new line item. Can someone help me figure out the javascript to alternate the color of every other row.



I'm also trying to figure out how to display a sequential id for each line.



Any helps would be appreciated.

[Former Community Member]

Hi,



1)

Setting alternate column colors in Designer is pretty nifty.

Have a look at the 'object'-palette of the table you want the colors to alternate. There's a sub-palette called 'row shading', which looks like this:








Here we go. Check 'Apply alternate row styling' and select any two colors, which fit your needs.



2)

Here's how to add a sequential id to each row:

Insert a scripting object (right click the root object in the 'hierarchy' palette, select 'insert script object').

Select your newly inserted scripting object, hit F2 and rename it uniquely (say, 'mainScript').



a) Insert the following line of code into the scripting object:




var rowCounter = 0;





b) Select your 'add' button and insert the following code into its 'click' event:




xfa.main.TableForm.tbl_Test._row1.addInstance(true);

xfa.main.TableForm.resolveNode("tbl_Test.row1["+ mainScript.rowCounter +"].ID").rawValue = mainScript.rowCounter +"";

mainScript.rowCounter++;

xfa.main.TableForm.resolveNode("tbl_Test.row1["+ mainScript.rowCounter +"].ID").rawValue = mainScript.rowCounter +"";





...whereas
main is the content area, your table is located in.


TableForm is a floating (!) subform, your table has to be located in.


tbl_Test is the name of your dynamic table and
row1 is the name of its first row.


ID is the name of the column, you want the row counter to be displayed.



Regards,

Steve

[Former Community Member]

Ok, forget my above posting, where I'm babbling about tables. Because it has nothing to do with your question. :-)



Sorry for the inconvenience...

[HowardTreisman]

Hi

There's a much easier way to show a row counter. Create a numeric field in the row, make it read-only/calculated, select the calculate event, and set it to: this.parent.index+1;

This has the advantage of automatically recalculating if you delete an intermediate row.



Howard

http://www.avoka.com

[Former Community Member]

figured out one way..<br /><br />var items = this.parent.instanceManager.resolveNodes("LineDetail[*]");<br />for (var i=0; i<items.length; i++)<br />{<br /><br /> // Alternate the background color of a repeating subform.<br /> if (i%2 == 0)<br /> items.item(i).border.fill.color.value="225,225,225";<br /> else<br /> items.item(i).border.fill.color.value="255,255,255";<br />}