0

I need a method of dynamically assigning DIV Ids to each tile as they are created. The Id's should be a combination of a letter and a number. (A1, B6, D5) Could anyone offer me some advice on how to accomplish this?

enter image description here

VF Page

<apex:form >
        <apex:pageBlock >

            <table id="board">
                <thead>
                    <tr class="boardNumbers">
                        <th></th>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                        <th>6</th>
                        <th>7</th>
                        <th>8</th>
                    </tr>
                </thead>
                <tbody>
                    <apex:variable var="index" value="{!0}"/>
                    <apex:variable var="letterIndex" value="{!0}"/>

                    <apex:repeat value="{!cells}" var="gc">
                        <tr>
                            <th class="boardLetters">{!letters[letterIndex]}</th>                          
                            <apex:repeat value="{!cells}" var="gp">
                                <td style="background-color: {!IF(MOD(index,2)==0, '#191919', '#A73131')}">
                                    <apex:variable var="index" value="{!index+1}"/>                                   
                                    <div class="tiles">
                                    </div>
                                </td>       
                            </apex:repeat>
                            <apex:variable var="index" value="{!index-1}"/>
                        </tr>     
                        <apex:variable var="letterIndex" value="{!letterIndex+1}"/>
                    </apex:repeat>
                </tbody>
            </table>



        </apex:pageBlock>
    </apex:form>

Controller Code

public class Checkers_Controller 
{
    public List<Integer> cells {get;set;}
    public List<String> letters {get;set;}

    public void init()
    {
        cells = new List<Integer>{1,2,3,4,5,6,7,8};
        letters = new List<String>{'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'};
    }
}
  • Why do you have nested repeat tags over the same collection? What do gc and gp mean? – Adrian Larson Dec 1 '15 at 16:41
  • The nested repeat tags draw the board. "gc" starts a new grid-row (used to be grid-column), and gp draws the grid points within that row. @AdrianLarson – Alex Brigham Dec 1 '15 at 16:44
2

Yes you can use merge fields and it will work

<apex:repeat value="{!cells}" var="gc">
                    <tr>
                        <th class="boardLetters">{!letters[letterIndex]}</th>                          
                        <apex:repeat value="{!letters}" var="gp">
                            <td style="background-color: {!IF(MOD(index,2)==0, '#191919', '#A73131')}">
                                <apex:variable var="index" value="{!index+1}"/>                                   
                                <div class="tiles" id="{!gp}{!gc}">
                                </div>
                            </td>       
                        </apex:repeat>
                        <apex:variable var="index" value="{!index-1}"/>
                    </tr>     
                    <apex:variable var="letterIndex" value="{!letterIndex+1}"/>
                </apex:repeat>

If you also need index ,try using maps in visualforce

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_dynamic_vf_maps_lists.htm

|improve this answer|||||
  • Just like that eh? I will try this out, thank you! – Alex Brigham Dec 1 '15 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.