DataView not showing data in gridItem Mode

Post Reply
Cariarer
Posts: 2
Joined: 21 Mar 2018, 09:17

31 Mar 2018, 08:50

Hi there,

I was using the data-list component and switched to dataView, as I want to display multiple items in a row. When I use the pTemplate listItem, I my data shows. If I use gridItem, the table is empty. I even tried to display just a simple text label, without my "panel", without success.

Does anyone have an idea what I have to change?

Kind regards,
Marco Heine...

merve7
Posts: 441
Joined: 12 Sep 2017, 10:44

02 Apr 2018, 14:58

Please see example http://primefaces.org/primeng/#/dataview
Can you send me your code?

bogdanim36
Posts: 2
Joined: 18 Nov 2018, 11:05

28 Nov 2018, 07:02

I have same problem listItem mode is showing, gridItem mode, is not showing.
This si my code:

Code: Select all

<div *ngIf="!isDesktop">
	<p-dataView [value]="userSrv.items">
		<ng-template let-item pTemplate="listItem">
			<div style="border-bottom: 1px solid lightgray;">
				<label>Name: </label>{{item.fullName}}
			</div>
		</ng-template>
		<ng-template let-item pTemplate="gridItem">
			<div class="ui-g-12 ui-md-3">
				{{item.fullName}}
			</div>
		</ng-template>
	</p-dataView>
</div>

merve7
Posts: 441
Joined: 12 Sep 2017, 10:44

29 Nov 2018, 13:56

Hi,
@Cariarer and @bogdanim36
If you want to use both layout mode, you need to add

Code: Select all

   <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
helper component.
For example;

Code: Select all

<p-header>
        <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
 </p-header>
You can see detail in http://primefaces.org/primeng/#/dataview

bogdanim36
Posts: 2
Joined: 18 Nov 2018, 11:05

29 Nov 2018, 15:23

thx, is woking this way. The exemple I fallowed is not complete (the one from Layouts):

Code: Select all

<p-dataView [value]="cars">
    <ng-template let-car pTemplate="listItem">
        <div>
            {{car.id}}
        </div>
    </ng-template>
    <ng-template let-car pTemplate="gridItem">
        <div class="ui-g-12 ui-md-3">
            {{car.year}}
        </div>
    </ng-template>
</p-dataView>

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests