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

flexgrid 집계 및 병합 문의 > Q&A | 토론

본문 바로가기

VueJS flexgrid 집계 및 병합 문의

페이지 정보

작성자 ty90do 작성일 2023-10-05 20:03 조회 427회 댓글 0건
제품 버전 : 최신버전
컨트롤 이름 : flexgrid

본문

아래 flexgrid(집계부분)의 가이드대로 동일하게 했는데, 값이 0이 나와서 이유를 찾지 못하고 있습니다. 질문은 아래와 같습니다.

1. 해당 집계 부분을 사용할때 꼭해야 하는 주의점이 있나요? 차이점은 아래 Datasource처럼

    처음 Loading시 grid에 grouprow등 넣지 않고 data binding(vue mounted)이후에 

   넣었습니다. (sum->max나 다른걸로 변경시 값이 나오고 있습니다.)

   그리고 해당 부분을 했을때 값을 변경되었을때 바로 집계에 반영을 하고 싶은데 해당 방법에

   대해서도 공유 부탁 드립니다.

2. columnFooters에 아래 row를 추가할때 그룹 병합을 해서 id/country/product부분을 한개로

   합쳐서 보여주고 싶은 데 해당 부분은 어떻게 해야하는지 sample 소스좀 부탁 드립니다.

   기존에 병합 가이드는 columnfooters 가이드는 없어서 해당 부분 가이드 부탁 드립니다.

    그리고 columnfooters는 계속 아래에 보이게 할수 있나요?

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

댓글목록

등록된 댓글이 없습니다.

4 답변

VueJS Re: flexgrid 집계 및 병합 문의

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

페이지 정보

작성자 GCK루시 작성일 2023-10-10 15:33 댓글 1건

본문

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


문의하신 내용에 대해 답변 및 확인 요청드립니다.


1. 그리드 집계(sum) 문의

=> 문의하신 현상이 저희 쪽에서 재현이 되지 않아 정확한 원인 파악이 어려운 상황입니다. 아래 기본 샘플을 공유드리오니 샘플과 문제가 되는 코드를 비교하여 저희 쪽으로 재현 가능한 샘플을 공유해주시기 바랍니다. 공유해주신 샘플을 바탕으로 재현 및 디버깅을 통해 답변 드릴 수 있도록 하겠습니다. 


더불어 데모(데이터 아래에 집계표시)에서 확인하실 수 있듯이 집계가 설정된 열의 셀 중 값을 편집모드를 통해 편집처리하면 집계에 반영처리되는 것을 확인하실 수 있으니 참고 부탁드립니다.




2. columnFooter 병합 문의

=> ColumnFooter 영역의 병합 처리의 경우, MergeManger 클래스를 확장하여 MergeManger을 정의 및 할당해주시면 됩니다. 아래 Q&A 답변 및 데모를 참고하여 주시기 바랍니다. 사용자 정의 병합 데모에서 ColumnFooter 설정 및 동일한 값이 있을 때 자동으로 병합처리되는 것을 확인하실 수 있습니다.


- 위즈모 합계관련하여 문의드립니다.

- 사용자 정의 병합 데모


3. columnFooter 위치 설정 문의

=> ColumnFooter 위치 설정과 관련하여 아래 Wijmo Q&A 답변 글을 참고하여 주시기 바랍니다.


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


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


감사합니다.

그레이프시티 드림


댓글목록

ty90do님의 댓글

ty90do 작성일

앞에 1번,2번 관련해서 sample 소스 해서 올리는데 Max는 값은 나오는것 같은데 Sum이 계속 0이 나오네요 따로 문제는 없어 보이는데... 확인 부탁 드립니다.(기존 데이터 집계 셈플 소스에서 조금 수정해서 진행하였습니다. => https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/Aggregation/Belowthedata/vue)

 - 처음 화면


 - Search버튼 선택했을때 화면

 - Source

<template>
  <div class="container-fluid">
      <wj-flex-grid
          :itemsSource="dataView" :allowMerging="'Cells'" :alternatingRowStep="0"
          :initialized="initializedGrid">
          <wj-flex-grid-column v-for="(item, index) in dataColList" :key="item"
            :binding="item.binding" :header="item.header" :aggregate="item.aggregate ? item.aggregate : 'None'"
            :allowMerging="item.allowMerging ? item.allowMerging : false">
      </wj-flex-grid>
      <button @click="search()">Search</button>
  </div>
</template>

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

new Vue({
  el: "#app",
  data: function() {
    return {
        data: getData(),
        dataGrid: null,
        dataColList: [],
        dataList: [
            {country: 'US', product: 'Phone', sales: '1.234', expenses: '20.1'},
            {country: 'US', product: 'Phone', sales: '21.154', expenses: '100'},
            {country: 'UK', product: 'Phone1', sales: '0', expenses: '150.154'},
            {country: 'UK', product: 'Phone1', sales: '0.1548', expenses: '0'},
        ],
        dataView: new wjCore.CollectionView(),
    };
  },
  methods:{
    initializedGrid(flex){
        this.dataGrid = flex;
    },
    search(){
        //footer clear
        this.dataGrid.columnFooters.rows.clear();
        //data column insert
        const inColList = [
            {binding: 'country', header: 'Country', allowMerging: true},
            {binding: 'product', header: 'Product', allowMerging: true},
            {binding: 'sales', header: 'Sales', aggregate: 'Sum'},
            {binding: 'expenses', header: 'Expenses', aggregate: 'Max'},
        ];
        this.dataColList = inColList;
        //data insert
        this.dataView.sourceCollection = this.dataList;
        this.dataView.refresh();
        //footer column 
        this.dataGrid.columnFooters.rows.push(new wjcGrid.GroupRow());
        this.dataGrid.columnFooters.setCellData(00'Σ');
        this.dataGrid.columnFooters.setCellData(02'Total');
    },
  }
});
</script>
<style>


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


그리고 해당 아래 소스를 수행할때 DataMap이 없다고 에러가 나는데 위 컬럼기준으로
footer에 grouprow추가할때 컬럼을 2번째 Cell에 Total이라고 추가하려면 어떻게 해야 하나요?

에러 부분 : this.dataGrid.columnFooters.setCellData(02'Total');

VueJS Re: flexgrid 집계 및 병합 문의

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

페이지 정보

작성자 GCK루시 작성일 2023-10-16 10:04 댓글 2건

본문

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


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


1. 집계 값이 나오지 않는 현상

=> 집계를 설정하기 위해서는 데이터가 number 타입이어야 하나 공유하신 코드상의 dataList의 sales, expense 값이 string으로 설정되어 있습니다. 아래와 같이 sales, expense의 값을 number 타입으로 설정 후 사용 부탁드립니다.


dataList: [
            {country: 'US', product: 'Phone', sales: 1.234, expenses: 20.1},
            {country: 'US', product: 'Phone', sales: 21.154, expenses: 100},
            {country: 'UK', product: 'Phone1', sales: 0, expenses: 150.154},
            {country: 'UK', product: 'Phone1', sales: 0.1548, expenses: 0},
        ],



2. columnFooters에 setCellData 설정 방법

=> 공유해주신 코드를 통해 테스트 해보았을 때 해당 에러메세지가 나오고 있지 않으나 columnFooters 추가 후 값이 설정될 수 있도록 setTimeout 이용해보시기 바랍니다.

this.dataGrid.columnFooters.rows.push(new wjcGrid.GroupRow());
var grid = this.dataGrid;

setTimeout(function(){
     grid.columnFooters.setCellData(0, 0, 'Σ');
     grid.columnFooters.setCellData(0, 2, 'Total');
},10)


코드 수정 후 결과는 아래와 같습니다. 다만 아래 이미지의 경우 sales 열의 sum 값이 나올 수 있도록 "Total" 값을 1번째 열에 설정했습니다.


d109c06577721dc351c96cf34b9d441b_1697418126_9785.png


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


감사합니다.

그레이프시티 드림

댓글목록

삭제된 댓글

ty90do 작성일

삭제된 댓글 입니다.

ty90do님의 댓글

ty90do 작성일

위 내용 감사합니다.
추가적으로 질문이 하나 있는데 아래 소스에서 Footer 추가해서 Sum했을때 해당 값이 나오는 부분에 대해서 format을 적용하려면 어떻게 해야하는지 방법 문의 드립니다.(소수점이 2자리등 이상하게 나와서 format은 g10을 적용하려고 합니다.)

//footer column 
        this.dataGrid.columnFooters.rows.push(new wjcGrid.GroupRow());
        this.dataGrid.columnFooters.setCellData(00'Σ');
this.dataGrid.columnFooters.setCellData(02'Total');

VueJS Re: flexgrid 집계 및 병합 문의

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

페이지 정보

작성자 GCK루시 작성일 2023-10-19 18:21 댓글 1건

본문

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


문의하신 기능의 경우, 아래 코드와 같이 formatItem 이벤트 내에서 getCellData를 통해 값을 가져온 뒤 format을 설정 및 textContent에 할당해주시면 됩니다.


theGrid.formatItem.addHandler(function(s,e){
        if (e.panel == s.columnFooters && e.col ===3) {
            e.cell.textContent = wijmo.Globalize.format(theGrid.columnFooters.getCellData(0,e.col),"g10")
        }
    })


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


감사합니다.

그레이프시티 드림

댓글목록

ty90do님의 댓글

ty90do 작성일

답변 감사 드립니다.
2가지 질문이 있는데 해당 아래 부분 문의 드립니다.
1. format g10으로 주니 화면과 다르게 위즈모 엑셀 다운로드 할때 뒤에 0000 이런형식으로 붙는데 해당 부분에 대해서는 어떻게 처리를 해야 하나요?
  



2. format g10으로 화면에서 나온 sum값하고 실제 계산한 값이 소수점 5자리 이상 넘어가면 차이가 발생하는데 해당 부분은 어떻게 해결 해야 하나요?


3. 추가로 질문이 있는데 format을 찾아보니 n*,,이 1백만건으로 최대 인데 혹시 1억건으로 표시할수 있는 방법이 있을까요?








위 부분에 대해서 소스도 보내 드립니다.

<template>
  <div class="container-fluid">
      <wj-flex-grid
          :itemsSource="dataView" :allowMerging="'Cells'" :alternatingRowStep="0"
          :initialized="initializedGrid">
          <wj-flex-grid-column v-for="(item, index) in dataColList" :key="item"
            :binding="item.binding" :header="item.header" :aggregate="item.aggregate ? item.aggregate : 'None'"
            :allowMerging="item.allowMerging ? item.allowMerging : false"
            :format="item.format">
      </wj-flex-grid>
      <button @click="search()">Search</button>
      <button @click="down()">Down</button>
  </div>
</template>

<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import "@grapecity/wijmo.vue2.grid";
import * as wjCore from "@grapecity/wijmo";
import * as wjcGrid from '@grapecity/wijmo.grid';
import * as wjcGridXlsx from '@grapecity/wijmo.grid.xlsx';
import { getData } from "./data";

new Vue({
  el: "#app",
  data: function() {
    return {
        data: getData(),
        dataGrid: null,
        dataColList: [],
        dataList: [
            {country: 'US', product: 'Phone', sales: 1.2340000154, expenses: 20.15142},
            {country: 'US', product: 'Phone', sales: 21.154112154, expenses: 100},
            {country: 'UK', product: 'Phone1', sales: 0, expenses: 150.154},
            {country: 'UK', product: 'Phone1', sales: 0.1548000145, expenses: 0.000002},
        ],
        dataView: new wjCore.CollectionView(),
    };
  },
  methods:{
    initializedGrid(flex){
        this.dataGrid = flex;
    },
    search(){
        //footer clear
        this.dataGrid.columnFooters.rows.clear();
        //data column insert
        const inColList = [
            {binding: 'country', header: 'Country', allowMerging: true},
            {binding: 'product', header: 'Product', allowMerging: true},
            {binding: 'sales', header: 'Sales', format: 'g10', aggregate: 'Sum'},
            {binding: 'expenses', header: 'Expenses', format: 'g10', aggregate: 'Sum'},
        ];
        this.dataColList = inColList;
        //data insert
        this.dataView.sourceCollection = this.dataList;
        this.dataView.refresh();
        //footer column 
        this.dataGrid.columnFooters.rows.push(new wjcGrid.GroupRow());
        this.dataGrid.columnFooters.setCellData(0, 0, 'Σ');
    },
    down(){
        wjcGridXlsx.FlexGridXlsxConverter.saveAsync(
            this.dataGrid,
            {
                includeColumnHeaders: true,
                includeStyles: false,
                formatItem: null
            },
            'FlexGrid.xlsx'
        );
    },
  }
});
</script>

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

VueJS Re: flexgrid 집계 및 병합 문의

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

페이지 정보

작성자 GCK루시 작성일 2023-10-24 14:48 댓글 0건

본문

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


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


1.그리드 export 시, format 설정 방법 문의

=> saveAsync의 formatItem을 이용하여 셀 영역이고 value가 0일 때 format을 설정하여 수정하실 수 있습니다.  

 xlsxCell.style.format = "0"

saveAsync의 formatItem의 경우, 아래 데모를 참조하시기 바랍니다.

- FlexGrid의 Excel 비동기 가져오기/내보내기


2. 그리드 집계 합 값 문의 

=> 공유하신 이미지의 계산기 숫자 값과 그리드 셀 값이 상이해서 결과가 다르게 나온 것으로 확인됩니다. 다시 한 번 계산기 숫자 값을 확인하여 계산 및 비교해보시기 바랍니다.


3. format 설정 문의

=> 테스트해보시면 확인하실 수 있듯이 "n*,,,"(ex. 1,000,000,000 -> 1.00)으로 설정할 시 1억 이상의 값도 표시할 수 있습니다.


format 함수와 함께 사용되는 format 문자열은 .NET Globalization 라이브러리에서 사용되는 format 문자열과 유사하며 아래 관련 문서를 공유드리오니 참고 부탁드립니다.


- format API 문서

- 표준 숫자 서식 문자열


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

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