3

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?

Paolo Dragone
  • 939
  • 1
  • 11
  • 27

2 Answers2

11

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:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thank you, and what if I want to add text label instead of an image? – Paolo Dragone Feb 14 '13 at 13:51
  • 1
    You're welcome. Text is by default not supported by the component. You could use CSS `content` property, or use image with text, or create a custom renderer, or use JS/jQuery `text()`. – BalusC Feb 14 '13 at 14:05
1

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;
}
Don Scott
  • 3,179
  • 1
  • 26
  • 40
MugiWara No Carlos
  • 31
  • 3