Is there a way to customize the rowEditor button? I mean if it is possible to change the image or add a text. If it is not possible, is there a way to obtain the same behaviour with another control like button or link?
3
votes
2 Answers
11
votes
Just use CSS. The below example assumes that you want to apply it on all datatables/roweditors and have the desired image files in /resources/images
folder.
.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:
1
votes
Also, if you want to use fa-icons from "Font Awesome" you can copy paste classes assigned to them from the 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;
}