Show/hide column in rich:extendedDataTable (RichFaces 4.x)

Question

RichFaces' show/hide column feature for rich:extendedDataTable is not available any more for the version 4.x. Any ideas how to implement it in some other way?

I tried to do it using JavaScript, with the document.getElementById() function and setting the element's style.display property, but it is hard to locate an element by id since all elements in rich:table are generated dynamically.

Any help and hints will be appreciated.

Answer 1

In Richfaces 4.x extendedDataTable, you could use css style to control both the header and body of that column in the same time. The css style of each column is created with the prefix ".rf-edt-c-" and column id. If you have a column with id "column1", the css style will be ".rf-edt-c-column1". The following is an example to hide/show the column with column id in Java Script.

<script type="text/javascript">
//<![CDATA[ 

    function hideColumn(columnId)
    {
        var styleSheets = document.styleSheets;
        for(var i=0;i<styleSheets.length;i++)
        {
            var rules = null;

            // IE and Chrome
            if(styleSheets[i].rules != null)
            {
                rules = styleSheets[i].rules;
            }
            // Firefox
            else if(styleSheets[i].cssRules != null)
            {
                rules = styleSheets[i].cssRules;
            }

            for(var j=0;j<rules.length;j++)
            {
                // Find the css style of that column
                if(rules[j].selectorText==".rf-edt-c-" + columnId)
                {
                    rules[j].style.display = "none";
                }
            }
        }
    }

    function showColumn(columnId)
    {
        var styleSheets = document.styleSheets;
        for(var i=0;i<styleSheets.length;i++)
        {
            var rules = null;

            // IE and Chrome
            if(styleSheets[i].rules != null)
            {
                rules = styleSheets[i].rules;
            }
            // Firefox
            else if(styleSheets[i].cssRules != null)
            {
                rules = styleSheets[i].cssRules;
            }

            for(var j=0;j<rules.length;j++)
            {
                // Find the css style of that column
                if(rules[j].selectorText==".rf-edt-c-" + columnId)
                {
                    rules[j].style.display = "";
                }
            }
        }
    }

//]]>
</script>

Answer 2

Just put the attribute visible="false" in the rich:column tag like this:

<rich:column id="name" label="Name" sortable="true" sortBy="#{edt.name}" visible="false">

Wrong RichFaces version, sorry.

Answer 3

I add this in rich:column attributes:

width="#{myBean.testDisplay('toDisplay')?'':'0px;border:none;'}"

It is better than using rendered because rendered bugs with the columns rearrangement.