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

Selector 체크박스 사용방법을 알고 싶습니다. > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

PureJS Selector 체크박스 사용방법을 알고 싶습니다.

페이지 정보

작성자 이용태 작성일 2020-10-29 19:03 조회 3,743회 댓글 0건
제품 버전 : 모름
컨트롤 이름 : wijmo.grid.selector.Selector

본문

첨부파일

코딩으로 Selector 객체를 사용하여 관련 그리드에 있는 체크박스를 선택적으로 컨트롤 하는 방법을 알고 싶습니다.

궁금한 내용은 아래와 같습니다.


var theSelector = new wijmo.grid.selector.Selector(theGrid, {

           itemChecked: function() {

           }

       });


1. 모든 체크박스를 선택, 선택헤제하는 방법

2. 2번째와 5번째 열에 체크박스를 체크, 언체크 하는 방법

3. 특정 열에 체크박스를 숨기는 방법

4. 특정 열에 체크박스를 비활성화 하는 방법



5. 아래와 같이 행을 선택은 되는데 체크박스는 아무런 동작이 일어나지 않습니다. 이런 방법으로 처리하는 건 아닌가요? 

theGrid.rows[2].isSelected = true; 



첨부파일에는 5번 항목에 대한 예제가 있습니다.

init() 함수에서 아래와 같이 설정하면 체크박스가 정상적으로 체크 됩니다. 

    theGrid.rows[1].isSelected = true;

    theGrid.rows[2].isSelected = true;


하지만 다른 이벤트에서 체크박스 관련된 내용을 실행하면 행은 선택은 되지만 체크박스는 표시되지 않습니다. 

    document.getElementById('checker').addEventListener('click', function(e) {

        theGrid.rows[1].isSelected = true;

        theGrid.rows[2].isSelected = true;

        theGrid.rows[3].isSelected = true;

        theGrid.rows[4].isSelected = true;

    });

그런데 그리드에 스크롤을 움직이면 체크박스가 표시되네요? 버그인가요? 아니면 별도 다른 코딩을 해줘야 하나요? 스크롤이 생기지 않은 상태일때는 어떻게 하죠?


=> 별도에 다른 코딩을 할때 theGrid.refresh(); 를 하니까 체크박스가 보이기는 하는데 매번 이렇게 해줘야 하나요?




답변 바랍니다. 



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

댓글목록

등록된 댓글이 없습니다.

3 답변

PureJS Re: Selector 체크박스 사용방법을 알고 싶습니다.

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

페이지 정보

작성자 GCK루시 작성일 2020-11-03 14:24 댓글 0건

본문

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


문의 주신 사항에 대해 답변 드리도록 하겠습니다. 


1,2번 문의는 지금 현재 확인 중에 있으며 확인되는 대로 답변 드리도록 하겠습니다.


3. 특정 열에 체크박스를 숨기는 방법 

formatItem 이벤트를 통해서 특정 바인딩된 열에 대해서 셀의 innerHTML을 빈 값을 넣어줌으로 체크박스를 안 보이게 설정하실 수 있습니다. 아래 코드는 "sales"에 바인딩된 열의 셀들의 innerHTML을 빈 값으로 넣어주는 코드입니다.
 

 theGrid.formatItem.addHandler((s, e) => {
        var row = s.rows[e.row];
        if (e.panel== s.cells && s.columns[e.col].binding === 'sales') {
            e.cell.innerHTML = ""
        }
});



4. 특정 열에 체크박스를 비활성화 하는 방법 

특정 열에 바인딩을 할 때, isReadOnly를 true로 설정해준시다면 해당 열이 읽기 전용 열로 설정되므로 체크박스가 비활성화로 구현하실 수 있습니다.


{ binding: 'active', header: 'Active',isReadOnly:true }



5. 아래와 같이 행을 선택은 되는데 체크박스는 아무런 동작이 일어나지 않습니다.  

스크롤을 할 시, 뷰의 변화로 인하여 그리드가 해당 체크박스의 상태를 감지하여 체크박스가 true가 되었습니다. 하지만, 이미 렌더링된 그리드의 체크박스에 true로 설정하였을 때, 그리드의 변화를 감지하지 못해 자동적으로 반영이 되지 않습니다. 따라서 refresh를 사용하여 업데이트를 불러일으킬 수 있으며 변화를 반영하기 위해서는 theGrid.refresh() 코드를 추가하여 사용하여 주시기 바랍니다.



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



감사합니다.


그레이프시티 드림


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

댓글목록

등록된 댓글이 없습니다.

PureJS Re: Selector 체크박스 사용방법을 알고 싶습니다.

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

페이지 정보

작성자 GCK루시 작성일 2020-11-06 15:30 댓글 0건

본문

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

먼저 답변이 늦어진 점 죄송합니다.


1. 모든 체크박스를 선택, 선택해제하는 방법

아래 코드와 같이 addEventListener 이벤트를 이용하여 체크박스를 클릭시 FlexGrid의 인스턴스가 theGrid인 전체 행에 대해서 forEach를 사용하여 각 열의 isSelected 속성의 값을 바꿔주는 방법으로 해당 기능을 구현하실 수 있습니다. 아래 코드를 참고하여 주시기 바랍니다.

//HTML
<label>
     Check all
     <input id="checker1" type="checkbox"  />
</label>

// JS

  document.getElementById("checker1").addEventListener("click", function (e) {
    theGrid.rows.forEach((r) => {
      if (r.isSelected === true) {
        r.isSelected = false;
      } else if (r.isSelected === false) {
        r.isSelected = true;
      }
    });
    theGrid.refresh();
  });



2. 2번째와 5번째 열에 체크박스를 체크, 언체크 하는 방법 

wijmo.grid.selector.BooleanChecker를 이용하여 열의 컬럼의 헤더를 클릭할 때, 해당되는 열의 체크박스의 전체 체크/언체크를 구현할 수 있습니다. 다음 코드를 참고하여 주시기 바랍니다. 체크박스를 추가할 열의 데이터의 타입을 Boolean으로 지정하고 그리드의 getColumn을 이용하여 체크박스를 추가한 열을 가져온 다음 wijmo.grid.selector.BooleanChecker를 통해 체크박스 생성하면 됩니다.

  function getData(count) {
    var countries = "US,Germany,UK,Japan,Italy,Greece".split(",");
    var products = "Widgets,Gadgets,Yahoos".split(",");
    var data = [];
    for (var i = 0; i < count; i++) {
      var item = {
        id: i,
        country: pickOne(countries),
        product:i % 2 != 0,
        discount: Math.random() * 0.3,
        downloads: Math.round(Math.random() * 200000),
        sales: i % 2 != 0,

      };
      data.push(item);
    }
    return data;
  }
 
(...)

let theGrid = new wijmo.grid.FlexGrid("#theGrid", {
    itemsSource: view,
    deferResizing: true,
    showMarquee: true,
    alternatingRowStep: 0,
    autoGenerateColumns: false,
    columns: [
      { binding: "id", header: "ID", isReadOnly: true },
      { binding: "country", header: "Country" },
      { binding: "product", header: "Product",dataType: wijmo.DataType.Boolean  },
      { binding: "discount", header: "Discount", format: "p0" },
      { binding: "downloads", header: "Downloads" },
      { binding: "sales", header: "Sales", dataType: wijmo.DataType.Boolean},

    ],
  });

(...)
 let checker = new wijmo.grid.selector.BooleanChecker(
    theGrid.columns.getColumn("product")
  );

  let checker2 = new wijmo.grid.selector.BooleanChecker(
    theGrid.columns.getColumn("sales")
  );


[BooleanChecker]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid_selector.booleanchecker.html 


해당 도움말 문서를 함께 전달드리니 참고하여 주시기 바랍니다. 


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



감사합니다.


그레이프시티 드림


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

댓글목록

등록된 댓글이 없습니다.

PureJS Re: Selector 체크박스 사용방법을 알고 싶습니다.

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

페이지 정보

작성자 GCK루시 작성일 2020-11-10 14:16 댓글 0건

본문

첨부파일

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


문의 주신 내용에 대해 이해를 돕고자 샘플 파일을 전달 드립니다.

샘플 파일을 참고하시고 추가적으로 문의할 사항이 있으시다면 언제든지 문의주시기 바랍니다.


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


감사합니다.


그레이프시티 드림


* 그레이프시티(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.