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: 18331
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?

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest