Primefaces Row Toggle on Row Click

Due to the requests of people, I am going to write in English right now (for software topics).

Primefaces, which is a popular tag library for jsf has lots of different components which are pretty useful but these kid of libraries have some problems when you want to do something more detailed. I am going to help these people who are using Primefaces datatable component.

This component has a feature called rowToggler which let us toggle the row by clicking a generated triangle button. But what if you want to toggle the row by clicking anywhere on the row instead of just clicking rowTogglee button? The answer is below. I coded a little javascript stuff to make this feature work.

From one release to another, the css style names and html hierarchy may change in Primefaces. I make this code work in Primefaces v3.5.10. Putting code below to your xhtml page will make datatable rows expandable by clicking on the row:

<script type="text/javascript">
    $(document).on("click", ".ui-datatable-tablewrapper .ui-datatable-data tr.ui-widget-content", function() {
        /*1 - for expanded area*/
        if ($(this).hasClass('ui-expanded-row-content')) {
            return;
        }
        /*2 - to collapse open ones*/
        expandedRow = $('.ui-expanded-row');
        if (expandedRow.length !== 0 && !$(this).hasClass('ui-expanded-row')) {
            $('.ui-expanded-row-content').css('display', 'none');
            var untoggler = expandedRow.find('.ui-row-toggler');
            dataTableWidgetVarName.toggleExpansion(untoggler);
        }
        /*3 - for main expand feature*/
        var toggler = $(this).find('.ui-row-toggler');
        dataTableWidgetVarName.toggleExpansion(toggler);
    });

    $(document).on("click", ".ui-icon-circle-triangle-e", function() {
        if ($(this).hasClass('ui-icon-circle-triangle-s')) {
            return;
        }
        expandedRow = $('.ui-expanded-row');
        if (expandedRow.length !== 0) {
            $('.ui-expanded-row-content').css('display', 'none');
            var untoggler = expandedRow.find('.ui-row-toggler');
            dataTableWidgetVarName.toggleExpansion(untoggler);
        }
    });
</script>

First function is for the row and the second one is for the rowToggler button itself. Because of a bug in Primefaces, you cannot fire click event of the row when you click on images in the row. This is why I had to implement another click function for rowToggler button itself. You can find other descriptions below:

1 - This code block is for expanded area of the row. With this code, onthing happens when user clicks on expanded are of the row.

2 - This code brings a feature to close other expanded rows in datatable when user clicks another row.

3 - This is the main expand feature. When user clicks on the row, I am just calling toggleExpansion() function of datatable element.

Hope this post will help and guide someone who needs similar feature for datatable.

( primefaces, jsf, mojarra, datatable, row, rowToggle, toggleExpansion )