- This topic has 28 replies, 3 voices, and was last updated 1 year, 8 months ago by
.
-
Hi,
Sure, if you face any further difficulties, do not hesitate to contact us!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/I’m still having difficulties making this work.
If I use the approach with creating a template (if it doesn’t exist) with DIVs and then setting textContent, then I get the font-awesome icon markup (<i>…</i>) as text in the field, which is not the desired result.
If I use empty string ” as template (if no icon should be shown) and font-awesome icon markup if a icon should be shown, then it works the first time at least, going from no icon to an icon.
But when the value is changed so there should be no icon again, then it doesn’t work – the icon stays.In the sample below ImageAvailable == false should show no icon in File, while ImageAvailable == true should show an icon in File.
So what I’m trying to switch between is either ” or ‘<i class=”some-font-awesome-font”></i>’.`{
label: ”, dataField: ‘File’, cellsVerticalAlign: ‘middle’, verticalAlign: ‘middle’, align: ‘center’, cellsAlign: ‘center’, width: 120, freeze: ‘far’,
allowEdit: false, template: function (formatObject)
{
const data = formatObject.row.data;console.log(‘data.ImageAvailable: ‘ + data.ImageAvailable);
if (!formatObject.template)
{
console.log(‘formatObject.template == null’);
formatObject.template = ”;
}if (data.ImageAvailable == false)
{
formatObject.template = ”;
}
else if (data.ImageAvailable == true)
{
formatObject.template = ‘<i class=”some-font-awesome-icon”></i>’;
}
}
},
{
label: ”, dataField: ‘ImageAvailable’, width: 70, allowEdit: true, visible: true
}`
Thank you! that fixed that issue.
Then I have another grid where I’m trying to do the same (example from earlier) where the value to act on is either 0, 1 or > 1.
The issue here though is, that at first when the grid is loaded the icons don’t show – but when any cell value is changed or even the grid is scrolled, all the icons appear, as if the column with the icons isn’t rendered initially.
I even tried calling grid.render(); but it doesn’t help. The grid is loaded the same way at the previous described one.
Actually, since all cells in the previous grid starts with ImageAvailable == false, the issue might be the same here – I wounld’t know because showing no icon is the default in this grid.
Yes. This almost “works” – but the cells that should have icons from the start, don’t show their icon until I either scroll the grid, change window size or change the value of a cell – or similar change – then the icon appear right away as were they always there.
{ label: '', dataField: 'Attachments', cellsVerticalAlign: 'middle', cellsAlign: 'center', width: 50, freeze: 'far', allowEdit: false, template: function (formatObject) { const data = formatObject.row.data; if (!formatObject.template) { formatObject.template = '<div></div>'; } if (data.attachment_count != null) { if (data.attachment_count < 1) { formatObject.template.innerHTML = ''; } else if (data.attachment_count == 1) { formatObject.template.innerHTML = '<some fa icon A>'; } else if (data.attachment_count > 1) { formatObject.template.innerHTML = '<some fa icon B>'; } } else { formatObject.template.innerHTML = ''; } } }Hi,
This is happening because you initially set the template to an empty div element.
You should have your conditionals initially also.
The correct code is this below:const data = formatObject.row.data;
if (!formatObject.template) {
if (data.attachment_count != null) {
if (data.attachment_count < 1) {
formatObject.template = ‘<div></div>’;
}
else if (data.attachment_count == 1) {
formatObject.template = ‘<div><some fa icon A></div>’;
}
else if (data.attachment_count > 1) {
formatObject.template = ‘<div><some fa icon B></div>’;
}
}
else {
formatObject.template = ‘<div></div>’;
}
} else {
if (data.attachment_count != null) {
if (data.attachment_count < 1) {
formatObject.template.innerHTML = ”;
}
else if (data.attachment_count == 1) {
formatObject.template.innerHTML = ‘<some fa icon A>’;
}
else if (data.attachment_count > 1) {
formatObject.template.innerHTML = ‘<some fa icon B>’;
}
}
else {
formatObject.template.innerHTML = ”;
}
}Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/I’m only setting an empty div if there is no template object, just like your online demo showed.
The conditions are checked just after this to determine what the content (innerHTML) of the div should be if any.
There are no occasion where the conditions are not checked. In all and any case, the innerHTML is being set to either: ”, ‘<some fa icon A>’ or ‘<some fa icon B>’.
The lines:
if (!formatObject.template) { formatObject.template = '<div></div>'; }Are not part of the conditions checks, they are standalone before any conditions are checked.
As far as I can tell, the code does the exact same thing, with half the lines of code more or less, or am I missing something?
There is something I’m missing I think. I have now added what I see to be redundant code lines to make it look like the sample, but it still doesn’t work.
Isn’t the idea to do the following:
Check if there is a template (a div) and if there isn’t one, then add it and set it’s content (innerHTML) to something: ”, ‘<_A_>’ or ‘<_B_>’.
Or if there is one, just set it’s content (innerHTML) to something: ”, ‘<_A_>’ or ‘<_B_>’.This not understood correctly?
- You must be logged in to reply to this topic.