You need to sign in to do that
Don't have an account?
Ethan Hotz
Using javascript to change the rowClasses attribute of a specific table
So I've got a page that generates tables dynamically and I'm trying to implement a function to show/hide table rows when a user double clicks on a header cell.
The relevant visualforce code:
The first table is blank and just displays date headers. Following tables display user name and hour information in their table headers, with project information in rows. Using rowClasses="display:none" gets the visual I want, but I'm not sure how to toggle that when users click on the user name header cell. Will using javascript to change the CSS class used work here, or should I try a different approach?
The relevant visualforce code:
<apex:pageBlock id="tableBlock"> <apex:pageBlockTable value="{!dummyList}" var="dummyVar" columnsWidth="20%,8%"> <apex:column headerValue="Developer" > </apex:column> <apex:repeat var="week" value="{!formattedWeekList}"> <apex:column headerValue="{!week}" > </apex:column> </apex:repeat> </apex:pageBlockTable> <apex:variable var="rowNum" value="{!0}"/> <apex:repeat var="dev" value="{!userList}"> <apex:variable var="rowNum" value="{!rowNum + 1}"/> <apex:pageBlockTable value="{!dev.projectMap}" var="project" id="userTable" rendered="{!tableVisible}" columnsWidth="20%,8%" ondblclick="toggleRows({!$Component.this});" rowClasses="display:none"> <apex:column headerValue="{!dev.userName.name}" id="devHeader" headerClass="" > <apex:outputLink id="dataDev" value="/{!project}" rendered="{!IF(project == null, false, true)}" >{!IF(project == caseID, 'Current Case', project)}</apex:outputLink> </apex:column> <apex:repeat value="{!dev.projectMap[project]}" var="date"> <apex:column headerValue="{!dev.totalHourMap[date]}" id="hourHeader" headerClass="{!dev.colColor[date]}" > <apex:outputText id="dataOutput" rendered="{!IF(project == null || project == caseID, false, true)}">{!dev.projectMap[project][date]}</apex:outputText> <apex:inputText id="dataInput" rendered="{!IF(project == caseID, true, false)}" value="{!dev.projectMap[project][date]}" style="width:20%"/> </apex:column> </apex:repeat> </apex:pageBlockTable> </apex:repeat>
The first table is blank and just displays date headers. Following tables display user name and hour information in their table headers, with project information in rows. Using rowClasses="display:none" gets the visual I want, but I'm not sure how to toggle that when users click on the user name header cell. Will using javascript to change the CSS class used work here, or should I try a different approach?