Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
camforcecamforce 

Manipulate a single item in a Datalist?

Hi Guys,

 

I have a datalist which lists records based on certain criteria and with each record I include a button too. I have the button coded to show or hide an OutputPanel relative to it's row in the datalist. The problem is that I can't seem to get the button to perform the task for a single item in the datalist. It will only show or hide every OutputPanel in the list.

 

I've tried playing with the var attribute but haven't found anything that works.

 

Hope you can help.

 

Regards,

 

Paul

 

 

Best Answer chosen by Admin (Salesforce Developers) 
prageethprageeth

If you like you can do a JavaScript trick to display the output panel.

 

<apex:page controller="MyClass" showHeader="false">
    <script>
        function show(btnId) {
          var panelId = btnId.replace('myButton', 'myPanel');
          document.getElementById(panelId).style.display = 'inline';
          return false;
        }
    </script>
    <apex:form>
        <apex:dataTable width="200px" value="{!myList}" var="text">
            <apex:column width="150px">
                {!text}
                <apex:outputpanel id="myPanel" style='display:none;'>
                  Hello !!!
                </apex:outputpanel>
            </apex:column>
            <apex:column width="50px">
                <apex:commandButton value="Show" id="myButton" 
                onclick="return show(this.id);"/>
            </apex:column>
        </apex:dataTable>
    </apex:form>
</apex:page>

 

All Answers

sinsiterrulezsinsiterrulez

I suggest you set the row id for which you have clicked the button in a variable & rerender the datalist.

Add rendered attribute to the outputpanel with condition that rowid == variable set.

Hope this works out. If not please let me know.
prageethprageeth

If you like you can do a JavaScript trick to display the output panel.

 

<apex:page controller="MyClass" showHeader="false">
    <script>
        function show(btnId) {
          var panelId = btnId.replace('myButton', 'myPanel');
          document.getElementById(panelId).style.display = 'inline';
          return false;
        }
    </script>
    <apex:form>
        <apex:dataTable width="200px" value="{!myList}" var="text">
            <apex:column width="150px">
                {!text}
                <apex:outputpanel id="myPanel" style='display:none;'>
                  Hello !!!
                </apex:outputpanel>
            </apex:column>
            <apex:column width="50px">
                <apex:commandButton value="Show" id="myButton" 
                onclick="return show(this.id);"/>
            </apex:column>
        </apex:dataTable>
    </apex:form>
</apex:page>

 

This was selected as the best answer
camforcecamforce

Thank both so much!

 

Both suggestions make a lot of sense although in the end I used the javascript trick because I don't have any experience with the variable tag in Visualforce.

 

 @sinsiterrulez : If you have time, I wouldn't mind seeing how this would be acheived using your method.

 

Thank you both, much appreciated.

 

Paul
sinsiterrulezsinsiterrulez

Hi Paul,

Here is the code for reference:

 

 

<apex:page controller="test">
<apex:form id="form">
<apex:dataTable id="table" width="200px" value="{!myList}" var="text">
            <apex:column width="150px">
                {!text.name}
                <apex:outputPanel rendered="{!(text.id == rowid)}">
                  {!text.id}
                </apex:outputPanel>
            </apex:column>
            <apex:column width="50px">
                <apex:commandButton value="Show" id="myButton" reRender="form">
                    <apex:param assignTo="{!rowid}" value="{!text.id}" name="rowid"/>
                </apex:commandbutton>
            </apex:column>
        </apex:dataTable>
</apex:form>
</apex:page>

--------------------------------Controller-----------------------------------
public class test {

public List<Lead> getmyList()
{
return [select id, name from Lead limit 20];
}

public string rowid{get;set;}

}

 

 
camforcecamforce

That is brilliant!

 

I love the use of the rendered attribute. I will be making use of this a lot in the future.

 

Thanks so much sinsiterrulez.