2

I have a pop-up display a table with some columns (Name, ID) of Accounts for example, I want to display additional information of the selected account when I click on specific row.

I used something like this, but I must click on a column not row , and does not get the correct data.

<apex:actionFunction name="readCell" action="{!readCellMethod}">
        <apex:param name="rowID" value="" assignTo="{!clickedRowId}"/>
</apex:actionFunction>

<apex:pageBlockTable value="{!account}" var="acc">                                    
   <apex:column headerValue="ID" value="{!acc.Id}" />
   <apex:column headerValue="Name" value="{!acc.Name}" onclick="readCell('{!acc.Id}')"/>
</apex:pageBlockTable>
Improve this question
1
  • Take a look at my.safaribooksonline.com/book/programming/forcedotcom/… which shows use of commandLinks in columns to pass parameters to other components on the page (or perhaps, in your case, to a controller). The commandlink approach hints to the user that something is clickable within the row. You could have commandlinks on every column - all doing the same thing – cropredy Jan 2 '14 at 22:35
6

Here's an option that still keeps your pageBlockTable. Add your jquery resource or link to it. Then, add this to head...

<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-1.4.2.min.js')}"  />
<script type="text/javascript">
    $j = jQuery.noConflict();
    function clickElem(elem){
        alert($j(elem).find(".accId").html());
    }
</script>

Add the onRowClick to the pageBlockTable and add a styleClass to your column.

<apex:pageBlockTable value="{!account}" var="acc" onRowClick="clickElem(this);">                                    
   <apex:column headerValue="ID" value="{!acc.Id}" styleClass="accId" />
   <apex:column headerValue="Name" value="{!acc.Name}" />
</apex:pageBlockTable>

Woo-hoo! First post on stackexchange...

Improve this answer
2
  • first post and it's even an answer, welcome! – Samuel De Rycke Feb 20 '14 at 22:26
  • Woow ! Great one .. how easy ! Thank you and Congratulations for your first answer post :) – user3003810 Feb 23 '14 at 13:11
3

You can achieve this by using <apex:repeat> instead of <apex:pageBlockTable>. You'll need to use HTML table instead of visualforce components and make additional effort to add some CSS classes (like headerRow, list) to make it look like apex:pageBlockTable.

So the code could like this:

<apex:actionFunction name="readCell" action="{!readCellMethod}">
    <apex:param name="rowID" value="" assignTo="{!clickedRowId}"/>
</apex:actionFunction>

<table cellspacing="0" cellpadding="0" border="0" class="list">
    <apex:repeat value="{!account}" var="acc">
        <tr class="headerRow">
            <th class="headerRow">
                <apex:outputText value="{!$ObjectType.Account.fields.Id.label}"/>
            </th>
            <th class="headerRow">
                <apex:outputText value="{!$ObjectType.Account.fields.Name.label}"/>
            </th>
        </tr>
        <tr id="row{!acc.Id}">
            <script>
                document.getElementById('row{!acc.Id}').onclick = function() {
                    return readCell('{!acc.Id}')
                };
            </script>
            <td>
                <apex:outputText value="{!acc.Id}"/>
            </td>
            <td>
                <apex:outputText value="{!acc.Name}"/>
            </td>
        </tr>
    </apex:repeat>
</table>
Improve this answer
6
  • nothing happen when I click on a row ! – user3003810 Jan 12 '14 at 9:32
  • I was testing this solution with JS alert instead of readCell function and it was working. You can try it out by replacing it for testing purpose. Perhaps there's some issue with this method? Is a request sent to the controller at all? – neff Jan 13 '14 at 9:15
  • I used JS alert to get readCell return value, and the result was false. And when I try to use it in SOQL query it's returns all rows with id = null – user3003810 Jan 14 '14 at 9:49
  • It's difficult to help you without more details. I don't know what readCellMethod does. All I'm saying that I'm pretty sure that if instead of calling readCell you would call a function showing alert with id of the source row it would work and display correct value. Maybe you need to check the debug logs to find out what's going on and what is to clickedRowId. – neff Jan 14 '14 at 10:43
  • 1
    Ok, but this alert tells us what is the result of calling readCellMethod. First we need to check if the proper value is passed as a parameter to this method. That's why I suggested checking Debug Logs and/or displaying alert with Account.Id or Account.Number before/instead of calling readCell. Please try it. If it works it means there is another issue (maybe readCellMethod or with getting the response) and I think you should ask new question so that community can help you. – neff Jan 16 '14 at 13:12

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.