HTML rendering in a column in a dgrid

3881
2
Jump to solution
07-06-2015 09:51 PM
AndrewTerwiel
Occasional Contributor II

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.

0 Kudos
1 Solution

Accepted Solutions
AndrewTerwiel
Occasional Contributor II

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.

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
AndrewTerwiel
Occasional Contributor II

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.