DataView Grid Template

[Tzypo]

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]

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

[david_bm]

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]

Glad to hear.