Gridview 5 columns and 10 rows per page

Yii 2.0 General Discussions
1

image
image1600×900 151 KB

Hi everybody, I am a newbie of Yii2, and I am willing to be a Yii2 Dev. Please help me to solve these tasks. Thank you in advance!
I have a list of candidate avatar like this picture, My tasks are to rearrange them in a gridview with 5 columns and 10 rows per page. There will be no checkboxs anymore, whenever admins choose an avatar, the image border appears as the chosen one. After that, I will have to send data about which is chosen and which is not in order to update to the database. And, of course, It should be better if admins can see the picture in a large size. Can anyone please help me?
Thank you in advance!

2

I think this question is a bit general, for start try to read the documentation about gridview, an play with it to understand how it works. Then come back again and ask more specific problems that you would have. Check the gridview in combination with data providers https://www.yiiframework.com/doc/guide/2.0/en/output-data-widgets

3

I’ve read it several times, and tried a lot but fail… I am now do it manually with pure code… :frowning:

4

image
image1600×900 548 KB

I hope It should be displayed like this but, 5 image in a row and a page should have 10 rows like that. then we can use pagination. Furthermore, when I choose images, a border should appear. It seems like i approve avatar for users with massive data. Do you understand what I mean?

5

You can simply use ListView widget for this. Set required view to style one item. Set pager property to paginate by 50 items and you will get vertical list. Then style it by using CSS (e.g. Flexbox) to make it 5×10.

1 Like
6

I agree with @mauglee This is a better way, and it will give you more flexibility how to proper display your each item.

1 Like
7

That’s how i did this:
Controller action:

/**
     * Lists all Product models.
     * @return mixed
     */
    public function actionIndex()
    {   
        $curent_category = null;
        if(($product_filter = Yii::$app->getRequest()->getQueryParam('ProductFilter')) !== null 
                && isset($product_filter['category'])){
            $active_category_id = $product_filter['category'];
            //get object
            $curent_category = Categories::findOne($active_category_id);
        }
        $products = new ProductFilter();
        $dataProvider = $products->search(Yii::$app->request->queryParams);
        
        
        return $this->render('index', [
            'dataProvider' => $dataProvider,
            'filter' => $products,
            'curent_category' => $curent_category,
            'company_profile' => $this->getCompany(),
        ]);
    }

View:

<!--Products-->  
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <?=
                        ListView::widget([
                            'dataProvider' => $dataProvider,
                            'options' => [
                                'tag' => 'div',
                                'class' => 'list-wrapper',
                                'id' => 'list-wrapper',
                            ],
                            'layout' => '<div class="row">{items}</div><div class="row text-center">{summary}</div>', //{pager}\n{items}\n{summary}
                            'itemView' => function ($model, $key, $index, $widget) use ($company_profile) {
                                //check product price
                                $company_config = $company_profile->companyProductConfigurations;
                                //check if there is any config for specific product
                                foreach ($company_config as $config) {
                                    if($config->product_id == $model->id){
                                        //mach found
                                        $model->checkCompanyLocalPriceConfig($config);
                                        return $this->render('_product_item',[
                                            'model' => $model,
                                            'company_profile' => $company_profile
                                        ]);
                                    }
                                }
                                $model->checkCompanyGlobalPriceConfig($company_profile);
                                return $this->render('_product_item',[
                                    'model' => $model,
                                    'company_profile' => $company_profile
                                    ]);
                            },
                        ]);
                        ?>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 text-center">
                        <?= LinkPager::widget([
                            'pagination' => $dataProvider->pagination,
                        ]); ?>
                    </div>
                </div>
1 Like
8

Thank you so much, that works!

9

That’s what I did…

image
image1600×900 424 KB