How to enable HTML tags in Jquery Grid Columns Dynamically

Question

I need to enable the HTML tags in Jquery Grid Columns Dynamically.

How can i do this.

My code is

     jQuery("#jqgrid").jqGrid({
        data: $scope.jqgrid_data,
        datatype: "local",
        height: 'auto',
        sortable: false,
        width: '900',
        colModel: $scope.ColDefinations,
        viewsortcols: [true, 'vertical', true],
        rowNum: $scope.pageSize,
        pager: '#pager_jqgrid',
        sortname: 'Student Name',
        toolbarfilter: true,
        viewrecords: true,
        sortorder: "asc",
        multiselect: false,
        autowidth: false,
        autoencode: true,
        gridview: true,
        rownumbers: true,
        shrinkToFit: false,
        forceFit: true,
        loadonce: false,
        pgbuttons: false,
  });

Binding html like this

    jQuery(".jqg-second-row-header th:eq(" + i + ")").text(titletext[0] + "<span> hai</span>");

Can any one help me,where i was wrong

Thanks in Advance

Answer 1

When using colModel you can use the label option to insert any html tag in the column header. As described here

you can

...
colModel : [
    { label : "Mynanme <span> hai</span> ", name: "field1",....},
    ...
],
...

To set dynamically label use the setLabel method described here

$("#jqGrid").jqGrid("setLabel", "field1", "Myname <span> hai</span>");

See the other parameters to change the visual presentation.