How to put custom HTML into Yii2 GridView header?

Question

There's this <abbr></abbr> tag in bootstrap that will automatically shows popup of the abbreviated word. I want to insert this tag to a certain header in the gridview with attribute name act. Here is my code so far.

        [
            'attribute'=>'act',
            'format'=>'raw',
            'label'=>'<abbr title="Area Coordinating Team">ACT</abbr>',
            'value'=>function($model){
              return '<span class="fa fa-thumbs-up text-green"></span>';
            }
        ],

but the output literally shows the whole <abbr title="Area Coordinating Team">ACT</abbr>

enter image description here

Please don't forget to add `yii2` tag too since question is about `Yii2 framework`. — arogachev, Apr 30 '15 at 09:28

score 14 · Accepted Answer · edited May 23 '17 at 10:34

14

I already answered that here.

To achieve that, use header property instead of label:

[
    'attribute' => 'act',
    'format' => 'raw',
    'header' => '<abbr title="Area Coordinating Team">ACT</abbr>',
    'value' => function ($model) {
        return '<span class="fa fa-thumbs-up text-green"></span>';
    },
],

That way HTML content won't be encoded.

Official docs:

$header

edited May 23 '17 at 10:34

Community

1
1

answered Apr 30 '15 at 08:34

arogachev

33,150
7
114
117

2

This works. But it removes the link to sort the column. Is there any way to make sorting still functions? – beginner May 04 '15 at 00:20
1

next answer with `'encodeLabel' => false,` – Tahiaji Dec 02 '20 at 09:53

score 6 · Answer 2 · answered May 15 '20 at 08:27

6

Use: 'encodeLabel' => false,

[
  'attribute'=>'act',
  'format'=>'raw',
  'label'=>'<abbr title="Area Coordinating Team">ACT</abbr>',
  'encodeLabel' => false,
  'value'=>function($model){
      return '<span class="fa fa-thumbs-up text-green"></span>';
  }
],

answered May 15 '20 at 08:27

Aleksandr

61
1
1

This is much better answer as everything else related to label will work this option, otherwise the header will loose the sorting, color etc. options with header option – Aditya Feb 22 '22 at 13:47

score 1 · Answer 3 · answered Jan 19 '18 at 03:23

If you would like to have custom HTML and still original sorting functionality, you can create own DataColumn (let's say in common/components), then in grid view set dataColumnClass:

<?= GridView::widget([
    ...
    'dataColumnClass' => 'common\components\HtmlDataColumn',
    'columns' => [
        'id',
        [
            'attribute' => 'title',
            'htmlHeader' => 'Some Header<span class="glyphicon glyphicon-ok"></span>',
        ],
        ...

My DataColumn:

namespace common\components;
use yii\helpers\Html;

/**
 * DataColumn that allows HTML in 'header' yet still appends sorting.
 */
class HtmlDataColumn extends \yii\grid\DataColumn
{
    public $htmlHeader = null;

    /**
     * @inheritdoc
     */
    protected function renderHeaderCellContent()
    {
        if ($this->header !== null || $this->label === null && $this->attribute === null) {
            return parent::renderHeaderCellContent();
        }

        if ($this->htmlHeader !== null) {
            $label = $this->htmlHeader;
        } else {
            $label = $this->getHeaderCellLabel();
            if ($this->encodeLabel) {
                $label = Html::encode($label);
            }
        }

        if ($this->attribute !== null && $this->enableSorting &&
            ($sort = $this->grid->dataProvider->getSort()) !== false && $sort->hasAttribute($this->attribute)) {
            return $sort->link($this->attribute, array_merge($this->sortLinkOptions, ['label' => $label]));
        }

        return $label;
    }
}

Hope this helps.

How to put custom HTML into Yii2 GridView header?

3 Answers3

Linked