jQuery UI Widgets › Forums › Grid › how to use font awesome icons as button text
Tagged: Button, custom widgets column, Font Awesome, javascript grid, jquery grid, jqxgrid
This topic contains 5 replies, has 3 voices, and was last updated by ivailo 7 years, 6 months ago.
-
Author
-
Hi;
Great work, indeed!https://www.jseditor.io/?key=jqxgrid-edit-button-text-as-font-awesome-icon
In the above example I use font-awesome icon as button text in jqxGrid. It is displayed properly but the buttonclick event is not triggered. What am I supposed to do?
Thanks,
Hi dalsword,
In your demo, cellsrenderer generates additional element that looks like the built in button of
columntype: 'button'
.
The click event remains bound to the built-in button, but this button is not displayed.
Like a workaround, you can update button’s CSS to cover the font-awesome icon and minimize the opacity. This way will allow clicking the original element, but the user will see the new one.
Here is an example: https://www.jseditor.io/?key=jqxgrid-edit-button-text-as-font-awesome-icon-css-updateBest Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comThanks!!
I was having the same issue with the buttonclick event. The CSS code did fix that issue, but I have found another. My code changes the icon based on a value in the row. This works, but when you scroll the grid, the icons change once they hit the top of the table. If you update the code in the example above with this code, you can see the issue.
$("#jqxgrid").jqxGrid( { width: 670, source: source, pageable: true, height: 250, ready: function(){ console.log("ready")}, columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsrenderer: cellsrenderer }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsrenderer: cellsrenderer, cellsformat: 'c2' }, { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }, { text: '<i class="fa fa-pencil fa-lg fa-fw"> </i>', datafield : 'Edit', width: '5%', columntype: 'button', cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) { if (row %2 ==0){ return '<i class="fa fa-pencil fa-lg fa-fw"> </i>'; }else{ return '<i class="fa fa-times fa-lg fa-fw"> </i>'; } }, buttonclick : function(row){ alert('hey ' + row); } } ] });
This bug is still unresolved. Are there any suggestions?
Hi natg504,
You can use another approach. Instead columntype ‘button’, you can create custom widgets column via createwidget and initwidget callback functions.
Here is an example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?lightBest Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.