! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

그리드 columnFooters 문의드립니다. > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

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

페이지 정보

작성자 헌집주인 작성일 2022-04-19 16:09 조회 1,552회 댓글 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(00'Σ');
    },
    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>

 

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

GCK루시님의 댓글

GCK루시 작성일

@헌집주인님 안녕하세요 그레이프시티입니다.

해당 문의의 경우, 확인 중에 있으며 업데이트 되는 대로 안내 드릴 수 있도록 하겠습니다.
답변이 늦어지는 점 죄송 드립니다.

감사합니다.
그레이프시티 드림

1 답변

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

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루시 작성일 2022-04-26 11:16 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의 주신 내용에 대해서 답변 드립니다.

FooterRow는 FlexGrid의 일부이며 그리드의 데이터 행 하단에 표시되며 나타낼 데이터 행이 없을 때는 HeaderRow 아래에 위치하게 됩니다. 따라서 항상 바닥글 행을 특정 위치에 표시하게 설정하기 위해서는 기본 그리드 아래에 두 번재 그리드를 추가하여 Footer 데이터만 설정하시는 것을 추천 드립니다. 


더불어 데이터와 열 크기를 동기화 하기 위한 몇 가지 이벤트를 처리해야 하며 관련된 자세한 코드는 아래 샘플에서 확인하시길 바랍니다.




다른 궁금한 점이 생기면, 문의 주시기 바랍니다. 


감사합니다. 

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.