jqxGrid Font-Awesome Buttons

[robinsonbrianParticipant]

Hi All,

I am trying to use the font-awesome fonts for Edit and Delete buttons on my grid.

I have set up the buttons as so:

		
columns: [
	{ text: 'Edit', datafield: 'Edit', columntype: 'button', width: 32, cellsrenderer: function()
	{ return "<div class='faEditIcon'></div>";	}, 
		buttonclick: function (row) {
		 // open the popup window when the user clicks a button.
		 editrow = row;
		 var offset = $("#jqxgridEventTypes").offset();
		 $("#popupWindowEventType").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

		// get the clicked row's data and initialize the input fields.
		var dataRecord = $("#jqxgridEventTypes").jqxGrid('getrowdata', editrow);
		$("#EventTypeId").val(dataRecord.EventTypeId);
		$("#EvtCode").val(dataRecord.Code);
		$("#EvtLeagueId").val(dataRecord.Name);
		$("#EvtDescription").val(dataRecord.Description);
		$("#EvtIsScore").val(dataRecord.IsScore);
		$("#EvtValue").val(dataRecord.Value);
		$("#EvtRequiresPlayer").val(dataRecord.RequiresPlayer);
		 // show the popup window.
		 $("#popupWindowEventType").jqxWindow('open');
		}			
	},		
	{ text: 'Id', datafield: 'EventTypeId', width: 50 , rendered: tooltiprenderer},

It almost works, as the font is rendered using this style:

.faEditIcon {
	position:relative;
}

.faEditIcon:before {
	font-family: FontAwesome;
	font-size: x-large;
	margin: 0 auto;
	content: "\f044"; 
}

The problem is that the html generated has an extra span created by the grid, with an offset that means the font-awesome icon does not appear, but is off to the right.

It looks like this in the browser:

<span style="position: absolute; <strong>left: 13px; top: 12px;</strong>">
	<div class="faEditIcon"></div>
</span>

Any ideas what I can do to fix this?

Cheers
Brian

[DimitarParticipant]

Hi Brian,

You can try increasing the row height with the rowsheight property and maybe the icon will become entirely visible. You can also try modifying the style applied to the class faEditIcon.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[robinsonbrianParticipant]

Hi,

Thanks for your help, unfortunately when I make the row height and column width larger, the problem is the button does not sit in the middle, but instead at the bottom right. This doesn’t look good. Unfortunately, no matter what css I use in the faEditIcon, I can not reverse the effects of the Span class. Do you have ny other solutions I could try?

Cheers
Brian

[robinsonbrianParticipant]

On another note, what is the span class in there for? It seems to serve no purpose???

[DimitarParticipant]

Hi Brian,

As an alternative approach, you can try using a widget column instead of columntype: 'button'. An example can be found here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts