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 )
