grid 안에 focus 넣는 방법 좀 알려주세요

ReactJS grid 안에 focus 넣는 방법 좀 알려주세요

추천0 비추천 0

페이지 정보

작성자 MESCIUSMAN

작성일 2023-12-08 08:44 조회 264회 댓글 1건

검색

제품 버전 : "@grapecity/wijmo.react.all": "^5.20221.857",

컨트롤 이름 : wijmo, grid, focus

본문

댓글목록

MESCIUS루시님의 댓글

MESCIUS루시

작성일 23-12-08 16:49

안녕하세요 메시어스입니다.

문의하신 내용은 확인 후 답변드리도록 하겠습니다.

감사합니다.
메시어스 드림

ReactJS Re: grid 안에 focus 넣는 방법 좀 알려주세요

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

페이지 정보

작성자 MESCIUS루시

작성일 2023-12-11 17:00 댓글 0건

본문

관련링크

안녕하세요 메시어스입니다.

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

※ 1,2번 문의와 관련된 소스 코드의 이전에 답변드렸던 샘플을 기반으로 제작하였으며 참고 부탁드립니다.

- reactjs에서 row를 클릭했을 때 팝업 띄우는 방법을 알고 싶습니다.

1. focus 및 입력이 바로 될 수 있도록 하는 방법 문의

=> 해당 기능을 구현하기 위해서는 팝업이 show로 호출된 다음, 팝업 내 그리드를 통해 주어진 셀에 대해서 편집을 시작하는 startEditing 메서드를 호출하면 됩니다. 아래 소스 코드를 참고하여 주시기 바랍니다.

refPopup.current.control.show(true);
refGrid.current.control.startEditing(true, 0, 3);

2. 셀 max/min length 설정 문의

=>Wijmo 그리드 최대 길이 설정의 경우, Column에는 maxLength 속성이 있으나 최소 길이 설정인 minLength 속성은 지원하고 있지 않습니다. 다만 cellEditEnding 이벤트를 이용하여 편집된 값의 길이가 일정 길이 미만이면 stayEditMode를 true로 설정하여 편집모드가 유지되도록 설정할 수 있습니다. 아래 소스 코드를 참고하여 주시기 바랍니다.

  function initialized(s) {
 
    s.addEventListener(s.hostElement, "click", (e) => {
      let ht = s.hitTest(e);
      // 선택된 곳이 셀일때
      if (ht.panel.cellType === 1) {
        refGrid.current.control.itemsSource = getDataTwo(); // 팝업 내 그리드 데이터 바인딩
        refGrid.current.control.columns[3].maxLength = 10; // max 길이 설정

        refGrid.current.control.cellEditEnding.addHandler(function (s, evt) {
          let newVal = s.activeEditor.value;
          if (newVal.length < 4) { // 일정 길이 미만이면
            alert("4글자 이상 작성해주시기 바랍니다");
            evt.stayInEditMode = true; // 편집모드 유
          }
        });
        refPopup.current.control.show(true); // 팝업창 보여주기
        refGrid.current.control.startEditing(true, 0, 3); // 팝업 내 그리드 데이터 바인딩
      }
    });
  }

3. 숫자만 입력할 수 있게 설정하는 방법 문의

=> 기본적으로 숫자 타입이 바인딩된 열의 경우, 문자열이 입력되지 않도록 설정되어 있습니다. 아래 이미지를 참고하여 주시기 바랍니다.