Dataview in primeNG is not getting displayed as grid

Question

I created a simple angular project with DataView component of primeNG. It is working fine when viewed as a list but when we select the grid option I still see the items listed one below the other and not as a grid. I'm not sure what I've done wrong, pTemplate="gridItem" just displays <p-panel> items one below the other. I want it to be displayed as a grid

https://primefaces.org/primeng/showcase/#/dataview

HTML:

<p-dataView #dv [value]="cars" [paginator]="true" [rows]="20"  filterBy="brand" layout="grid"
[sortField]="sortField" [sortOrder]="sortOrder">
<p-header>
    <div class="ui-helper-clearfix">
        <div class="p-grid">
            <div class="p-col-12 p-md-4">
                <p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By" (onChange)="onSortChange($event)" [style]="{'min-width':'140px'}"></p-dropdown>
            </div>
            <div class="p-col-6 p-md-4 filter-container">
                <div style="position:relative">
                    <input type="search" pInputText placeholder="Search by brand" (input)="dv.filter($event.target.value)">
                </div>
            </div>
            <div class="p-col-6 p-md-4" style="text-align:right">
                <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
            </div>
        </div>
    </div>
</p-header>
<ng-template let-car pTemplate="listItem">
    <div class="p-col-12">
        <div class="car-details">
            <div>
                <div class="p-grid">
                    <div class="p-col-12">Vin: <b>{{car.vin}}</b></div>
                    <div class="p-col-12">Year: <b>{{car.year}}</b></div>
                    <div class="p-col-12">Brand: <b>{{car.brand}}</b></div>
                    <div class="p-col-12">Color: <b>{{car.color}}</b></div>
                </div>
            </div>
            <button pButton type="button" icon="pi pi-search" (click)="selectCar($event, car)"></button>
        </div>
    </div>
</ng-template>
<ng-template let-car pTemplate="gridItem">
    <div style="padding:.5em" class="p-col-6 p-md-4">
        <p-panel [header]="car.brand" [style]="{'text-align':'center'}">
            <div class="car-detail">{{car.year}} - {{car.color}}</div>
            <button pButton type="button" icon="pi pi-search" (click)="selectCar($event, car)" style="margin-top:0"></button>
        </p-panel>
    </div>
</ng-template>

you example is the same as primeng example and it working fine https://stackblitz.com/edit/primeng-dataview-demo-tebw4x?file=src/app/app.component.html — Muhammed Albarmavi, Aug 24 '20 at 06:04
Did you ever find a solution for this? I have the same problem and noticed that when switching to the grid it is repeating the div element which means it will never create multiple columns in a single row. — iamthestreets, Aug 19 '22 at 23:14

score 0 · Answer 1 · answered Aug 21 '21 at 06:25

That's are because dataview handle layout automatically on the header, if you want to give that option to the user add tag to the header of dataview

<ng-template pTemplate="header">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</ng-template>

or you can just add default layout for dataview just by adding layout='grid' to main tag

<p-dataView #dv [value]="cars" [paginator]="true" [rows]="20"  filterBy="brand" 
layout="grid"
[sortField]="sortField" [sortOrder]="sortOrder">
***
</p-dataView>

Dataview in primeNG is not getting displayed as grid

1 Answers1