If I’m passing a string, and that string is empty, I’m using cellsRenderer to return the string –Unspecified–. However, the returned string is at the top left of the cell and not vertically centered as are all the rest of cells.
Why doesn’t this happen naturally? What do I need to do to keep everything uniform?
Here’s the affected snippet where I’m using cellsRenderer:
cellsRenderer: function (row, column, value, defaulthtml, columnproperties) {
if (value == "") {
return `<i>--Unspecified--</i>`;
}
}
Example Table:
$(document).ready(function () {
var data = [
{
id: "1",
legalName: "Agrawal, Parag",
agencyName: "Social Services",
agencyAddress:
"Market Square, 1355 Market St<br>#900<br>San Francisco, CA 94103",
phone: "(415) 222-9670",
hireDate: "04-3-2022",
dob: "08-09-2000",
has401k: true
},
{
id: "2",
legalName: "Zuckerberg, Mark",
agencyName: "Defense Advocates Office",
agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
phone: "(123) 456-1234",
hireDate: "01-30-2019",
dob: "",
has401k: true
},
{
id: "2",
legalName: "Walker, Johnny",
agencyName: "Prosecutor's Office",
agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
phone: "(123) 329-0124",
hireDate: "10-03-2016",
dob: "03-01-1988",
has401k: false
},
{
id: "2",
legalName: "Daniels, Jack",
agencyName: "Prosecutor's Office",
agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
phone: "(123) 856-5309",
hireDate: "07-28-2011",
dob: "",
has401k: false
},
{
id: "2",
legalName: "Fonda, Jane",
agencyName: "Social Services",
agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
phone: "(123) 456-1234",
hireDate: "06-14-2021",
dob: "04-28-1979",
has401k: true
},
{
id: "2",
legalName: "Bauer, Jack",
agencyName: "National Defense",
agencyAddress: "24 Bauer Way<br>Menlo Park, CA 94025",
phone: "(123) 242-4242",
hireDate: "11-10-2008",
dob: "11-13-1975",
has401k: false
}
];
// prepare the data
var source = {
datatype: "json",
datafields: [
{ name: "legalName" },
{ name: "agencyName" },
{ name: "agencyAddress" },
{ name: "phone" },
{ name: "hireDate", type: "date" },
{ name: "dob", type: "date" },
{ name: "has401k", type: "bool" }
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
var source = {
localdata: data,
datatype: "array",
loadComplete: function (data) {},
loadError: function (xhr, status, error) {}
};
$("#jqxgrid").jqxGrid({
source: dataAdapter,
sortable: true,
theme: "energyblue",
width: "98%",
height: "630px",
pageable: false,
columnsresize: true,
selectionMode: "none",
filterable: true,
showfilterrow: true,
autoheight: true,
autorowheight: true,
groupable: true,
columns: [
{ text: "Legal Name", datafield: "legalName", width: "15%" },
{
text: "Agency Name",
datafield: "agencyName",
filtertype: "checkedlist",
width: "20%"
},
{ text: "Agency Address", datafield: "agencyAddress", width: "20%" },
{ text: "Phone", datafield: "phone", width: "15%" },
{
text: "Hire Date",
datafield: "hireDate",
cellsformat: "d",
filtertype: "range",
width: "10%"
},
{
text: "DOB",
datafield: "dob",
cellsformat: "d",
filtertype: "range",
width: "10%",
cellsRenderer: function (row, column, value, defaulthtml, columnproperties) {
if (value == "") {
return `<i>--Unspecified--</i>`;
}
}
},
{
text: "Has 401K",
datafield: "has401k",
width: "10%",
columntype: "checkbox",
filtertype: "checkedlist"
}
]
});
});/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
.auto-margin {
display: block;
margin: 0 auto;
}
header {
display: flex;
justify-content: center;
align-items: center;
height: 8vh;
padding: 3rem 0;
background-color: #aaa;
code {
color: white;
font-weight: 300;
}
}
#jqxgrid {
margin-top: 1rem;
}
.notice {
margin-top: 1rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.base.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.energyblue.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqx-all.js"></script>
<div id="jqxWidget">
<header>
<h2 class="text-center">Example: How to style individual cells using <code>cellrenderer</code></h2>
</header>
<div id="jqxgrid" class="auto-margin"></div>
</div>
<p class="notice"><strong>*All data is test data only.</strong></p>
Hope I'm still in time to lend you a hand.
The return value in cellsRenderer() will be used directly to render the UI just like the jquery html() >> $('#container').html('<div style="color:red;">content</div>') did. Therefore you need to return a styled HTML syntax.
To retain all original styling, you can re-use back the argument defaulthtml in cellsRenderer() as that is the default HTML syntax which will be used to render the UI and it consists all styling within it as well.
You can try replace your return value in cellsRenderer() with the 'defaulthtml' but changing its original content as shown below :
I had updated your snippet and you can see the result.
Hope it helps !