AnsweredAssumed Answered

HTML rendering in a column in a dgrid

Question asked by alterwiel on Jul 6, 2015
Latest reply on Jul 7, 2015 by alterwiel
  • Comment • 2

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.

alterwiel
alterwiel Jul 7, 2015 3:17 PM
Correct Answer

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.

See the reply in context
No one else had this question

Outcomes