How to show a prompt message on GridView Filter boxes?

Yii 2.0 General Discussions
1

The default GridView filter boxes are blank. Would like to show a greyed out prompt message to indicate this is a filter. Also a Search Magnifying glass Icon would be great. I posted a question stackexchange and got a few ideas - Ref: Users are confused and think search filter are input boxes. How best to indicate that they are for filtering search results? - User Experience Stack Exchange. Any options to satisfy the suggestions provided by the UX experts who answered the questions will also be great.

I would also like to put a Magnifying glass Icon on the SerialColumn of the filter row which is always blank.

2

I was able to add a Search Icon to the empty Filter Columns by including emptyCell property to GridView Widget as below

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'emptyCell' => '<button type="button" class="btn btn-outline-secondary" disabled>
             <span class="fa fa-search fa-lg" title="Use the Search bar to Filter the rows"></span>
             </button>',
        'filterModel' => $searchModel,
        'columns' => [
...

I would only like this to happen in the 1st column but it happens on every empty filter column. Which is ok, but not great.

1 Like
3

I was able to get the search placeholder text on the search fields using

For text input box

'filterInputOptions' => ['placeholder' => 'Search', 'class' => 'form-control'],

For Dropdowns

'filterInputOptions' => ['prompt' => 'Search', 'class' => 'form-control'],

I have figured out to get the icon inside text box I should use the approach in the link below. But not having success implementing it.

1 Like
4

You can use Depoendency injection to configure this for every DataColumn …

In config/web.php

$config = [
	'container' => [
        'definitions' => [
            yii\grid\DataColumn::class => [
				'filterInputOptions' => ['placeholder' => 'Search', 'class' => 'form-control'],
            ],
        ],
    ],
2 Likes
5

That’s great! Yii has so many cool features - I should read the manual some more to save myself time. Thank you very much.