jQuery UI Widgets Forums Grid Alignment background color in cell

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • 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: Screenshot

    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>`

    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

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

You must be logged in to reply to this topic.