Skip to main content
added 322 characters in body
Source Link
Derek F
  • 64.1k
  • 15
  • 55
  • 104

There is no good way to apply CSS to an entire row in a datatable or pageblocktable other than when you want to alternate the CSS class every X rows (for which we have the rowClasses attribute).

You could use the style attribute in every column to achieve the effect you're looking for, but doing that via a merge expression (for each column) does mean that your page takes longer to render. That might not be noticible until you have hundreds of rows, but it is something to keep in mind.

If you have a custom controller or controller extension, having the logic to determine what CSS class to apply be handled in Apex (I'm thinking you'd create a wrapper class to hold your record as well as which css class to apply") may help performance.

Honestly though, the least cumbersome (and most dynamic) approach here would probably be to take care of row coloring through Javascript.

If you use an html passthrough attribute (i.e. an attribute in your <apex:column> tag that's prefixed with html- like html-pickval) you can fairly easily find the element with that attribute (a <td>), and navigate up to the parent (a <tr>, table row). Something like the following:

// This selector finds all td elements with the "pickval" attribute
// Visualforce _should_ strip out the 'html-' part when it renders to html
document.querySelectorAll("td[pickval]").foreach(
    function(element){
        let targetClass;
        switch(element.value){
            case "Transferencia" :
                targetClass = "redColour";
                break;
            case "Cheque Bancario Nominativo" :
                targetClass = "greenColour";
                break;
            default:
                targetClass = "greyColour";
            }
        }

        element.parentNode.classList.add(targetClass);
    }
);

+edit:

Forgot to mention that in your example, the first "Tipo" column (your final example has 2 "Tipo" columns) didn't appear as a picklist because you referenced the field directly in the <apex:column> as opposed to referencing it via <apex:inputField> nested inbetween <apex:column> and </apex:column>.

There is no good way to apply CSS to an entire row in a datatable or pageblocktable other than when you want to alternate the CSS class every X rows (for which we have the rowClasses attribute).

You could use the style attribute in every column to achieve the effect you're looking for, but doing that via a merge expression (for each column) does mean that your page takes longer to render. That might not be noticible until you have hundreds of rows, but it is something to keep in mind.

If you have a custom controller or controller extension, having the logic to determine what CSS class to apply be handled in Apex (I'm thinking you'd create a wrapper class to hold your record as well as which css class to apply") may help performance.

Honestly though, the least cumbersome (and most dynamic) approach here would probably be to take care of row coloring through Javascript.

If you use an html passthrough attribute (i.e. an attribute in your <apex:column> tag that's prefixed with html- like html-pickval) you can fairly easily find the element with that attribute (a <td>), and navigate up to the parent (a <tr>, table row). Something like the following:

// This selector finds all td elements with the "pickval" attribute
// Visualforce _should_ strip out the 'html-' part when it renders to html
document.querySelectorAll("td[pickval]").foreach(
    function(element){
        let targetClass;
        switch(element.value){
            case "Transferencia" :
                targetClass = "redColour";
                break;
            case "Cheque Bancario Nominativo" :
                targetClass = "greenColour";
                break;
            default:
                targetClass = "greyColour";
            }
        }

        element.parentNode.classList.add(targetClass);
    }
);

There is no good way to apply CSS to an entire row in a datatable or pageblocktable other than when you want to alternate the CSS class every X rows (for which we have the rowClasses attribute).

You could use the style attribute in every column to achieve the effect you're looking for, but doing that via a merge expression (for each column) does mean that your page takes longer to render. That might not be noticible until you have hundreds of rows, but it is something to keep in mind.

If you have a custom controller or controller extension, having the logic to determine what CSS class to apply be handled in Apex (I'm thinking you'd create a wrapper class to hold your record as well as which css class to apply") may help performance.

Honestly though, the least cumbersome (and most dynamic) approach here would probably be to take care of row coloring through Javascript.

If you use an html passthrough attribute (i.e. an attribute in your <apex:column> tag that's prefixed with html- like html-pickval) you can fairly easily find the element with that attribute (a <td>), and navigate up to the parent (a <tr>, table row). Something like the following:

// This selector finds all td elements with the "pickval" attribute
// Visualforce _should_ strip out the 'html-' part when it renders to html
document.querySelectorAll("td[pickval]").foreach(
    function(element){
        let targetClass;
        switch(element.value){
            case "Transferencia" :
                targetClass = "redColour";
                break;
            case "Cheque Bancario Nominativo" :
                targetClass = "greenColour";
                break;
            default:
                targetClass = "greyColour";
            }
        }

        element.parentNode.classList.add(targetClass);
    }
);

+edit:

Forgot to mention that in your example, the first "Tipo" column (your final example has 2 "Tipo" columns) didn't appear as a picklist because you referenced the field directly in the <apex:column> as opposed to referencing it via <apex:inputField> nested inbetween <apex:column> and </apex:column>.

Source Link
Derek F
  • 64.1k
  • 15
  • 55
  • 104

There is no good way to apply CSS to an entire row in a datatable or pageblocktable other than when you want to alternate the CSS class every X rows (for which we have the rowClasses attribute).

You could use the style attribute in every column to achieve the effect you're looking for, but doing that via a merge expression (for each column) does mean that your page takes longer to render. That might not be noticible until you have hundreds of rows, but it is something to keep in mind.

If you have a custom controller or controller extension, having the logic to determine what CSS class to apply be handled in Apex (I'm thinking you'd create a wrapper class to hold your record as well as which css class to apply") may help performance.

Honestly though, the least cumbersome (and most dynamic) approach here would probably be to take care of row coloring through Javascript.

If you use an html passthrough attribute (i.e. an attribute in your <apex:column> tag that's prefixed with html- like html-pickval) you can fairly easily find the element with that attribute (a <td>), and navigate up to the parent (a <tr>, table row). Something like the following:

// This selector finds all td elements with the "pickval" attribute
// Visualforce _should_ strip out the 'html-' part when it renders to html
document.querySelectorAll("td[pickval]").foreach(
    function(element){
        let targetClass;
        switch(element.value){
            case "Transferencia" :
                targetClass = "redColour";
                break;
            case "Cheque Bancario Nominativo" :
                targetClass = "greenColour";
                break;
            default:
                targetClass = "greyColour";
            }
        }

        element.parentNode.classList.add(targetClass);
    }
);