HOWTO: multi-column yii\widgets\ListView

Yii 2.0 Tips, Snippets and Tutorials
1

I needed to get this working and I thought I’d share. It’s actually very easy to use yii\widgets\ListView in a way that shows multiple columns, e.g., if you have a list of 5 items, you could do a 2-column list so that your output is:

a b
c d
e

There are no real changes to ListView of course. You just do this via CSS and then tell ListView which classes to use.

First, in your site.css, create your grid and ListItem config. (Replace the “2” in .masonary-grid with the # of columns you want.)

.masonary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4rem;
}

.masonary-grid > .masonary-grid-listview-summary {
    grid-column: 1 / -1;
}

.masonary-grid > .masonary-grid-listview-pager {
    grid-column: 1 / -1;
}

.masonary-grid > .masonary-grid-item {
}

That’s 99.9% of the work right there.

Next, in your yii\widgets\ListView, you need to set:

$listOptions=['class' => 'masonary-grid'];
$itemOptions=['class' => 'masonary-grid-item'];
$summaryOptions=['class' => 'masonary-grid-listview-summary text-right'];
$pagerOptions= ['class' => 'masonary-grid-listview-pager'];
$layout = sprintf('%s{items}%s', $summaryEnable ? '{summary}' : '', $pagerEnable ? '{pager}' : '');

echo \yii\widgets\ListView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => ......,
    'layout' => $layout,
    'options' => $listOptions,
    'itemOptions' => $itemOptions,
    'summaryOptions' => $summaryOptions,
    'pager' => [
        'firstPageLabel' => 'first',
        'lastPageLabel' => 'last',
        'prevPageLabel' => '<span class="fa fa-arrow-left"></span>',
        'nextPageLabel' => '<span class="fa fa-arrow-right"></span>',
        'maxButtonCount' => 8,
        'options' => $pagerOptions,
    ],
]);

Try it out!

2 Likes
2

Hi @dp778899

Thank you for the useful tip.
A screen shot would be nice, I think.

3

Sure, happy to.

Okay, so this is yii\widget\ListView. Using the css, below are examples of how to use ListView to create columnar grids:

# typical ListView, 1 col 1 row
.masonary-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 4rem;
}

Results in:

# no changes to ListView, but update below to use 2 cols per row
.masonary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4rem;
}

image

# yet again no change to ListView, only modifying CSS for 4 cols per row
.masonary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 4rem;
}

1257×745 58 KB

1 Like
4

Thank you @dp778899 !!

I’ve been doing the same thing using col-??-n of bootstrap, like :

'itemOptions' => ['class' => 'col-photo col-md-3 col-sm-4 col-xs-6'],

Now I realize that display:grid might be a better option. I’d like to try it.

1 Like
5

I find that using the grid approach is just more flexible and cleaner since you don’t have to edit code if you want to make changes. You just edit the css whenever a design change is needed.

To be clear, this was gleaned via google. I didn’t come up with any of it. I just applied it to yii\widget\ListView. :slight_smile:

1 Like