DataView Grid Template

UI Components for Vue
Post Reply
Tzypo
Posts: 1
Joined: 27 Jul 2020, 01:40

27 Jul 2020, 01:44

I'm trying to implement a view with the data view.

The List view works as expected. But the Grid view arranges all items on below the other instead of side by side like in the example.

What am I doing wrong the grid template?

Here my code:

Code: Select all


  <pv-dataview :value="exercises" :layout="layout" :paginator="true" :rows="pageSize" :totalRecords="totalCount"
                   :lazy="true" @page="onPage($event)">
        <template #header>
          <div class="p-col-6" style="text-align: right">
            <pv-dataviewlayoutoptions v-model="layout"/>
          </div>
        </template>
        <template #empty>Keine Einträge gefunden.</template>

        <template #list="item">
          <sc-exercise-small
            :title="item.data.titel"
            :image="item.data.previewAsset"
            :short-key="item.data.shortKey"
            :tags="item.data.tags"
            :intensity="item.data.intensity"
            :prefered-preview-media="item.data.preferedPreviewMedia "
            :show-add-button="true"
            :show-open-button="true"
            :difficulty="item.data.difficulty"
            @AddClicked="onSelected(item)"
          />
          />
        </template>

        <template #grid="slotProps">
          <div class="p-col-12 p-md-4">
            <div class="product-grid-item card">
              <div class="product-grid-item-top">
                <pv-panel :header="slotProps.data.titel" style="text-align: center;width: 200px">
                  <pv-button icon="pi pi-search"></pv-button>
                </pv-panel>
              </div>
            </div>
          </div>
        </template>
      </pv-dataview>

cagatay.civici
Prime
Posts: 18430
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

04 Aug 2020, 15:06

Code seems to be fine, do you have a screenshot or a stackblitz for review?

david_bm
Posts: 1
Joined: 16 Sep 2020, 19:27

16 Sep 2020, 22:22

I first asked the same question. Apparently, the anwser in my case was also in the documentation: you need to add PrimeFlex as well. See https://www.primefaces.org/primevue/sho ... /primeflex.

I completely overlooked that statement in the documentation: my mistake. I hope this helps future newbies that run into this problem ;) .

cagatay.civici
Prime
Posts: 18430
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

10 Oct 2020, 18:13

Glad to hear.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest