Does anyone know how I can get html to render in a dgrid column?
This is what I'm trying to do:
var linksData = [
{ link: '<span class="glyphicon glyphicon-info-sign"></span> DP Plans' },
{ link: 'T1 Land' },
{ link: 'T1 Property' }
];
var linksGrid = new Grid({
showHeader: false,
className: "dgrid-autoheight",
columns: {
link: 'link'
}
});
linksGrid.renderArray(linksData);
The result of this code is that I see the literal string in the first row's column. I'd like the html to be rendered by the browser.
Solved! Go to Solution.
Thanks, Robert. You put me on the right track. I ended up using the formatter function like so:
var linksData = [
{ link: '<span class="glyphicon glyphicon-circle-arrow-right"></span> DP Plans' },
{ link: '<span class="glyphicon glyphicon-circle-arrow-right"></span> T1 Land' },
{ link: '<span class="glyphicon glyphicon-circle-arrow-right"></span> T1 Property' }
];
var linksGrid = new Grid({
showHeader: false,
className: "dgrid-autoheight",
columns: {
link: {
label: 'link',
formatter: function (item) {
return item;
}
}
}
});
This has made the browser render the span element correctly so that I get a nice little icon next to my link text.
Andrew,
You are going to have to use a renderCell function for your first column. I have never used renderArray so I am not sure how that works in with renderCell but here is a link you can refer to:
javascript - renderCell function not being called? - Stack Overflow
Thanks, Robert. You put me on the right track. I ended up using the formatter function like so:
var linksData = [
{ link: '<span class="glyphicon glyphicon-circle-arrow-right"></span> DP Plans' },
{ link: '<span class="glyphicon glyphicon-circle-arrow-right"></span> T1 Land' },
{ link: '<span class="glyphicon glyphicon-circle-arrow-right"></span> T1 Property' }
];
var linksGrid = new Grid({
showHeader: false,
className: "dgrid-autoheight",
columns: {
link: {
label: 'link',
formatter: function (item) {
return item;
}
}
}
});
This has made the browser render the span element correctly so that I get a nice little icon next to my link text.