Datatable Conditional cell format without class

[jcansell@gmail.comParticipant]

Hi I’m trying to set the background colour of a jqxdatatable cell using a variable.
I have looked at the example for conditional formatting, but it uses hard-coded classes.
My colour data will come from the back-end.
The problem I’m having, is when I put a <div> with a coloured background into the <td>, I can’t get the <div> to completely fill it.
Its like there is a border around the <div>.
Is there some way to override this? Thanks.

columns: [
	{ text: 'Status',	datafield: 'Task_Button', cellsformat: 'd', filtertype: 'range', width: '100',	
		cellsRenderer: function (row, column, value, rowData, some_variable ) {
			var cellhtml = '<div style="width: 100%; height: 100%; background-color: ' + some_variable + '; ">';
			cellhtml += value + '</div>';
			return cellhtml;
			}        
		},
	//
	//  more columns...
	//
	]

[adminKeymaster]

Hi,

I suggest you to take a look at jqxGrid or our Smart.Grid on htmlelements.com. They have more styling options compared to the jqxDataTable which is focused for more basic table-related operations. Another hint is that you can try to use CSS class applied to jqxDataTable similar to the conditional formatting demo, but the background can be defined as a CSS variable. In the cellsRenderer, you can dynamically set the CSS variable

Best regards,

[jcansell@gmail.comParticipant]

Just for anyone who lands here, the correction to the css is..

.jqx-cell {
  padding: 0;
  margin: 0;
}

[Author]

Posts