Alignment background color in cell - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: background, background color, grid

This topic contains 1 reply, has 2 voices, and was last updated by Yavor Dashev 3 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Alignment background color in cell Posts
July 30, 2021 at 3:22 pm Alignment background color in cell #120579

paulcobben
Participant

Hi,

I want the background color centered as a block in a cell. Height is fixed and width must be sized according the value.
My result until now is:

My code is: `<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Licentie Overzicht</title>
<meta name=”description” content=”Licentie Overzicht” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/sparkleflowdash.css” type=”text/css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxexport.js”></script>
<!– JSZip –>
<script type=”text/javascript” src=”scripts/jszip.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var cellclass = function (row, columnfield, value) {
if (value < 0) {
return ‘red’;
}
if (value == 0) {
return ‘yellow’;
}
if (value > 0) {
return ‘green’;
}
}

var source =
{
datatype: “csv”,
datafields: [
{ name: ‘applicatie’, type: ‘string’ },
{ name: ‘licentie’, type: ‘float’},
{ name: ‘usersad’, type: ‘float’},
{ name: ‘verschil1’, type: ‘float’},
{ name: ‘installaties’, type: ‘float’},
{ name: ‘verschil2’, type: ‘float’},
{ name: ‘gebruik’, type: ‘float’},
{ name: ‘verschil3’, type: ‘float’}

],
sortcolumn: ‘verschil1’,
sortdirection: ‘asc’,
url: “sparkleflow-data/licentieall.csv”,
columnDelimiter: “;”

};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 520+110+110+110+110+110+110+110+16,
height: 750,
source: dataAdapter,
showcolumnlines: false,
rowsheight: 50,
showfilterrow: true,
filterable: true,
sortable: true,
selectionmode: ‘multiplecellsextended’,
theme: ‘sparkleflowdash’,
columnsresize: true,
columns: [
{ text: ‘Applicatie’, datafield: ‘applicatie’, width: 520 },
{ text: ‘Licentie’, datafield: ‘licentie’, width: 110, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Users in AD’, datafield: ‘usersad’, width: 110, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Verschil’, datafield: ‘verschil1’, cellclassname: cellclass, width: 110, align: ‘center’, cellsalign: ‘center’, margin: 48 },
{ text: ‘Installaties’, datafield: ‘installaties’, width: 110, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Verschil’, datafield: ‘verschil2’, cellclassname: cellclass, width: 110, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Gebruik’, datafield: ‘gebruik’, width: 110, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Verschil’, datafield: ‘verschil3’, cellclassname: cellclass, width: 110, align: ‘center’, cellsalign: ‘center’ }
]
});
$(“#excelExport”).jqxButton();
$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportview’, ‘xlsx’, ‘jqxGrid’);
});
});
</script>
</head>
<body class=”default”>
<style>
.green {
color: black;
border: none;
height: 30px;
background-image: none;
border-radius: 15px 5px;
background-color: #c6efce;
}
.yellow {
color: black;
border: none;
height: 30px;
background-image: none;
border-radius: 15px 5px;
background-color: #ffeb9c;
}
.red {
color: black;
border: none;
height: 30px;
background-image: none;
border-radius: 15px 5px;
background-color: #ffc7ce;
}
</style>
<p style=”font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; color: rgb(143, 143, 143)”>Licentie Overzicht</p>
<div id=”jqxgrid”></div>
<div style=”margin-top: 20px;”>
<div style=”float: left;”>
<input type=”button” value=”Export naar Excel” id=”excelExport” />
</div>
</div>
</body>
</html>`

August 2, 2021 at 1:14 pm Alignment background color in cell #120580
Yavor Dashev
Participant
Hi paulcobben,

I have used the code that you have provided and based on the description of the functionality you want I have created a code snippet to achieve this.
In you CSS:
```
   
.jqx-grid-cell.green,
.jqx-grid-cell.red,
.jqx-grid-cell.yellow {
        margin-top: 10px;
}

.jqx-grid-cell-middle-align {
        margin-top: 0px!important;
        padding-top:  6px;
 }
```
Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.