그리드 columnFooters 문의드립니다.

VueJS 그리드 columnFooters 문의드립니다.

추천0 비추천 0

페이지 정보

작성자 헌집주인

작성일 2022-04-19 16:09 조회 1,557회 댓글 1건

검색

제품 버전 : 5.20213.834

컨트롤 이름 : 그리드

본문

관련링크

안녕하세요, 그리드 columnFooters 문의드립니다.

다음 데모페이지에서 본문첨부한 소스로 테스트를 했습니다.

문의드릴 것은 columnFooters 가 고정된 그리드 높이 하단에 고정되게 하는 옵션이 있는지 입니다

감사합니다.

https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/Aggregation/Belowthedata/vue

<template>
  <div class="container-fluid">
      <wj-flex-grid
          :itemsSource="data" :initialized="initializedGrid" style="height:200px;border:solid 2px red;">
          <wj-flex-grid-column binding="id" header="ID" :width=60 :isReadOnly=true></wj-flex-grid-column>
          <wj-flex-grid-column binding="country" header="Country"></wj-flex-grid-column>
          <wj-flex-grid-column binding="product" header="Product"></wj-flex-grid-column>
          <wj-flex-grid-column binding="sales" header="Sales" aggregate="Sum"></wj-flex-grid-column>
          <wj-flex-grid-column binding="expenses" header="Expenses" aggregate="Sum"></wj-flex-grid-column>
      </wj-flex-grid>
  </div>
</template>

<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import "@grapecity/wijmo.vue2.grid";
import * as wjcGrid from '@grapecity/wijmo.grid';

new Vue({
  el: "#app",
  data: function() {
    return {
        data: this.getData()
    };
  },
  methods:{
    initializedGrid(flex){
        flex.columnFooters.rows.push(new wjcGrid.GroupRow());
        flex.bottomLeftCells.setCellData(0, 0, 'Σ');
    },
    getData() {
      let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      products = 'Phones,Computers,Cameras,Stereos'.split(','),
      data = [];
      for (let i = 0; i < 3; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            product: products[i % products.length],
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
      }
      return data;
    }
  },
});
</script>

<style>
  .wj-flexgrid {
    max-height: 250px;
    margin: 10px 0;
  }
  body {
    margin-bottom: 20px;
  }
</style>