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

트리 체크박스, 행번호, 에디팅 데이터 확인 방법 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

PureJS 트리 체크박스, 행번호, 에디팅 데이터 확인 방법 문의

페이지 정보

작성자 라레 작성일 2021-09-22 19:20 조회 3,074회 댓글 0건
제품 버전 : 5.20211.794

본문

안녕하세요

트리의 체크박스, 행번호, 에디팅 데이터 확인 방법 문의드립니다.

자세한 문의사항은 아래와 같습니다.


1. 트리 행번호, 체크박스 삽입 방법
아래와 같이 트리의 체크박스를 0번행에 삽입 할 경우, 트리구조가 체크박스에 삽입됩니다.

정상적으로 트리 행번호 > 체크박스 > 명칭 > 기타 로 셋팅 할 수 있는 방법 문의드립니다.
또한 기존 사용하던 행번호가 적용되지 않아 이도 확인 부탁드리겠습니다.


- ex.1 ) 체크박스 > 명칭 > 기타로 설정할 경우 (트리 기능 비정상)
2b8987f862ca6aba7abb9aa44f66fe5a_1632305419_9729.png
 


- ex.2 ) 명칭 > 체크박스 > 기타로 설정할 경우 (트리 기능은 정상)

2b8987f862ca6aba7abb9aa44f66fe5a_1632305464_684.png
 


- 소스 샘플

 stockView = new wijmo.collections.CollectionView(result, {

            pageSize: 100,

            trackChanges: true

        });

// 페이지 이동

        stockGridPager = new wijmo.input.CollectionViewNavigator('#stockGridPager', {

            byPage: true,

            headerFormat: '{currentPage:n0} / {pageCount:n0}',

            cv: stockView

        });


        typeCdList = new wijmo.grid.DataMap(getTypeCdList(), 'id', 'name');

        stockColumns =  [

                { binding: 'name', header: '명칭', isReadOnly: true, width: 150, align:"center"},

                { isReadOnly: true, width: 35, align:"center"},

                { binding: 'id', header: '코드', isReadOnly: true, width: 150, align:"center" },

                { binding: 'level', header: '레벨', isReadOnly: true, visible: false  },

                { binding: 'cost', header: '원가', isReadOnly: false, width: 100, align:"center"  },

                { binding: 'sellPrice', header: '판매가', isReadOnly: false, width: 100, align:"center"  },

                { binding: 'tagQuantity', header: '재고알림수량', isReadOnly: false, width: 150, align:"center"},

                { binding: 'activeYn', header: '활성화', isReadOnly: false, width: 80, align:"center"},

                { binding: 'edit', header: '정보수정', isReadOnly: true, width: 150, align:"center",

                    cellTemplate: wijmo.grid.cellmaker.CellMaker.makeButton({

                        text: '<b>수정</b>',

                        click: (e, ctx) => {

                            showPop('modify_building');

                        }

                        

                    })

                }

      ];

 

        stockGrid = new wijmo.grid.FlexGrid('#stockGrid', {

        columns : stockColumns,

            itemsSource: stockView,

            headersVisibility: 'Column',

            childItemsPath: ['item', 'item', 'item'],

            autoGenerateColumns: false,

            formatItem:function(s,e){

    if((e.panel.cellType==1)&&(s.activeEditor)){

        if((s.editRange.row==e.row)&&(s.editRange.col==e.col)){

          return;

          }

        }

   

    if (e.panel == s.cells) {

            var col = s.columns[e.col];

                if (col.binding == 'edit' ) {

                    //셀 서식

                    var html;

                    var level = s.getCellData(e.row, 'level');


                  if(level != 3){

                  html = '';

                  e.cell.textContent = html;           

                    }       

                }

            }

      },

            loadedRows: function (s, e) {

                s.rows.forEach(function (row) {

                    row.isReadOnly = false;

                });

            },

            cellEditEnding: function (s, e) {

                var col = s.columns[e.col];

                var inven = s.columns[e.col - 1];

                if (col.binding == 'cost' || col.binding == 'sellPrice' || col.binding == 'tagQuantity') {

                    var value = wijmo.changeType(s.activeEditor.value, wijmo.DataType.Number, col.format);

                    if( !wijmo.isNumber(value)){

                        e.cancel = true;

                        e.stayInEditMode = false;

                        alert('숫자로만 입력 가능합니다.');

                        return false;

                    }

                    

                }

            }

        });


       _setUserGridLayout('stockLayout', stockGrid, stockColumns);


        //행번호 표시하기

         stockGrid.itemFormatter = function (panel, r, c, cell) { 

            if (panel.cellType == wijmo.grid.CellType.RowHeader) {

                cell.textContent = (r + 1).toString();

            }

        }; 


        // 체크박스 생성

         stockSelector = new wijmo.grid.selector.Selector(stockGrid, {

            itemChecked: () => {

            }

        });

        stockSelector.column = stockGrid.columns[1];

 

 



2. 트리 그리드의 수정 된 데이터를 확인하는 방법 문의

기존 그리드에 사용하던 View.itemsEdited 로 수정 라인이 확인되지 않아. 다른 방법을 사용해야하는지 문의드립니다.

 
- 소스 

 stockView = new wijmo.collections.CollectionView(result, {

            pageSize: Number($('#stockGridPageCount').val()),

            trackChanges: true

        });

        stockGrid.columns[1].width = 32;

        stockGridPager.cv = stockView;

        stockGrid.itemsSource = stockView;

  }


//수정 아이템 확인

var editItem = stockView.itemsEdited;




 3. 트리그리드 bool 데이터 필드 체크박스 표출 방법 확인요청 ( activeYn 필드 )
 일반 그리드의 경우, 데이터 타입이 bool 일 경우 별도의 셋팅 없이 체크박스로 표출되었으나,

트리로 변환 시 체크박스로 표출되지 않고 실제 값 (true, false) 로 포출되어 ,체크박스로 표시 가능한 방법이 있는지 문의드립니다.


 

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

댓글목록

등록된 댓글이 없습니다.

2 답변

PureJS Re: 트리 체크박스, 행번호, 에디팅 데이터 확인 방법 문의

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

페이지 정보

작성자 GCK루시 작성일 2021-09-24 11:35 댓글 0건

본문

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


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


1. 트리 행번호, 체크박스 삽입 방법 

=> 해당 문의의 경우, 현재 확인 중에 있으며 업데이트가 되는 대로 안내 드릴 수 있도록 하겠습니다.


2. 트리 그리드의 수정 된 데이터를 확인하는 방법 문의 

=> 그리드에서 중첩된 collectionView를 소스를 가질 수 없으므로 trackChanges를 위해서는 그리드의 셀  편집이 커밋되거나 취소되었을 때 발생하는 cellEditEnded 이벤트와 함께 변경된 항목을 수동적으로 itemsEdited 컬렉션을 추가해주셔야 합니다. 아래 코드에서 해당 기능을 확인하실 수 있습니다.


(..)
cellEditEnded:function(s,e){
      let oldValue = e.data;
      let newValue = s.getCellData(e.row, e.col);

      if (oldValue !== newValue) {
        markAsEdited(s, e.getRow().dataItem);
      }
      
    }
  });

  function markAsEdited(grid, item) {
    let existingItem = grid.collectionView.itemsEdited.find(
      (_item) => _item === item
    );
    if (!existingItem) {
      grid.collectionView.itemsEdited.push(item);
    }
  }



3. 트리그리드 bool 데이터 필드 체크박스 표출 방법 확인요청 ( activeYn 필드 ) 

=> 트리그리드에서 boolean 값을 통한 하위 항목 열에 대한  체크박스 표시를 위해서는 기존 열의 dataType을 Boolean으로 설정해 주셔야 합니다. 아래 코드를 참고하시기 바랍니다.


{ binding: 'active', dataType:3,allowSorting: false }


[dataType]

https://demo.grapecity.co.kr/wijmo/api/enums/wijmo.datatype.html#boolean 


도움말 문서도 같이 전달 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다. 


감사합니다. 

그레이프시티 드림 



* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.


댓글목록

등록된 댓글이 없습니다.

PureJS Re: 트리 체크박스, 행번호, 에디팅 데이터 확인 방법 문의

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

페이지 정보

작성자 GCK루시 작성일 2021-09-28 11:24 댓글 0건

본문

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


먼저 문의 주신 사항에 답변이 지연된 점 죄송합니다. 

1. 트리 행번호, 체크박스 삽입 방법 

=> 기존 열의 collpase/expand 아이콘은 기본적으로 0번째 열로 설정되므로 해당 이슈가 발생하는 것으로 확인됩니다. 해당 아이콘의 위치를 이동시키기 위해서는 기존 아이콘을 삭제 후, FlexGrid의 formatItem 이벤트를 통해 원하시는 열에 추가하시면 됩니다. 자세한 코드는 아래 샘플에서 확인 가능하십니다.



[formatItem]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.flexgrid.html#formatitem 


도움말 문서도 같이 전달 드리오니 참고 부탁 드립니다.


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


감사합니다. 

그레이프시티 드림 



* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.


댓글목록

등록된 댓글이 없습니다.

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