Primeng: Grid Layout of DataViewModule is not working

Created on 29 Mar 2018 · 4Comments · Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
When i use like below it works perfectly
<ng-template let-car pTemplate="listItem">
But if i replace with gridItem then it displays nothing
<ng-template let-car pTemplate="gridItem">

Expected behavior
It should display provided data.

Minimal reproduction of the problem with instructions
I followed primeng documentation.

What is the motivation / use case for changing the behavior?
Nothing need to be changed. I just want my data to be displayed.

Please tell us about your environment:
Ubuntu 16.04 LTS 64-bit, RubyMine, yarn, local server

Angular version:
5.2.9
PrimeNG version:
5.2.0
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Google chrome
Language: [all | TypeScript X.X | ES6/7 | ES5]
Typescript 2.4.2
Node (for AoT issues): node --version =
7.10.0

Source

shashidhargm

👍2

Most helpful comment

@shashidhargm The issue is with the documentation, it is missing one detail.

On the <p-dataView> tag you have to insert an attribute called "layout" and set it to "grid".

Here's an example:

<p-dataView #dv [value]="listaImagens['content']"
                        filterBy="brand"
                        [paginator]="true"
                        [rows]="10"
                        [lazy]="true"
                        (onLazyLoad)="getImagensProduto($event)"
                        [totalRecords]="listaImagens['totalElements']"
                        layout="grid"> ... </p-dataView>

This worked for me. Hope it helps!

michaelsampietro on 23 May 2018

👍4 🎉3 😄1

All 4 comments

@shashidhargm The issue is with the documentation, it is missing one detail.

On the <p-dataView> tag you have to insert an attribute called "layout" and set it to "grid".

Here's an example:

<p-dataView #dv [value]="listaImagens['content']"
                        filterBy="brand"
                        [paginator]="true"
                        [rows]="10"
                        [lazy]="true"
                        (onLazyLoad)="getImagensProduto($event)"
                        [totalRecords]="listaImagens['totalElements']"
                        layout="grid"> ... </p-dataView>

This worked for me. Hope it helps!

michaelsampietro on 23 May 2018

👍4 🎉3 😄1

@michaelsampietro, It worked. Thanks :+1:

shashidhargm on 28 May 2018

🎉1

@shashidhargm Please, close this issue :)

michaelsampietro on 28 May 2018

👍1

@michaelsampietro you saved my day.