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
– arogachev, Commented Apr 30, 2015 at 9:28

Community · Accepted Answer · 2017-05-23 10:34:11Z

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, 2017 at 10:34

CommunityBot

11 silver badge

answered Apr 30, 2015 at 8:34

arogachev

33.6k8 gold badges121 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

beginner Over a year ago

This works. But it removes the link to sort the column. Is there any way to make sorting still functions?

Tahiaji Over a year ago

next answer with 'encodeLabel' => false,

Aleksandr · Accepted Answer · 2020-05-15 08:27:51Z

9

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, 2020 at 8:27

Aleksandr

911 silver badge1 bronze badge

1 Comment

Aditya Over a year ago

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

LihO · Accepted Answer · 2018-01-19 03:23:05Z

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.

Collectives™ on Stack Overflow

How to put custom HTML into Yii2 GridView header?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related