Clever Geek Handbook

PrimeFaces configures RowEditor on datatable

Is there a way to customize the rowEditor button? I mean if you can change the image or add text. If that's not possible, is there a way to get the same behavior with another control like a button or link?

+3


source to share


2 answers


Just use CSS. The example below assumes you want to apply it on all datatables / roweditors and have the desired image files in the folder /resources/images

.

.ui-datatable .ui-row-editor .ui-icon-pencil {
    background-image: url("#{resource['images/pencil.png']}");
}

.ui-datatable .ui-row-editor .ui-icon-check {
    background-image: url("#{resource['images/check.png']}");
}

.ui-datatable .ui-row-editor .ui-icon-close {
    background-image: url("#{resource['images/close.png']}");
}


See also:

+10


source


Also, if you want to use the fa icons from "Font Awesome", you can copy the insert classes assigned to them from font-awesome.css.



.ui-datatable table tbody tr td .ui-row-editor .ui-icon-pencil 
{
   background: none !important;
   text-indent: initial;
   /* display: inline-block; */
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
}
.ui-datatable table tbody tr td .ui-row-editor .ui-icon-pencil:before {
   content: "\f044";
}
.ui-datatable table tbody tr td .ui-row-editor .ui-icon-pencil:hover {
   font-weight: bold;
}
+1


source






More articles:


All Articles