10월 19, 2023

Websquare combobox setValue가 아닌 index로 설정하기 - setSelectedIndex()

 Websquare combobox에서 default 값을 설정할 때 

comboboxId.setValue() 로는 설정이 불가능한 상황이 있다. 


예를 들어 dataset을 사용하는데 2번째 행과 3번째 행이 모두 "Z"라는 value를 가지고 있을 경우이다. 


만약 내가 3번째 행을 default로 선택해서 보여주고 싶은데 2번째 행과 3번째 행이 모두 Z라는 value를 가지고 있다면


comboboxId.setValue("Z") 라고 하면 2번째 행이 디폴트로 보여진다. 


이럴 때는 setSelectedIndex를 사용하면 되는데 


setSelectedIndex( idx )
idx에 해당하는 index로 항목을 선택하는 기능으로 chooseOption, allOption 속성이 정의 된 경우 해당 item도 index에 포함된다.
Parameter
nametyperequireddescription
idxNumberY항목의 index.
Sample
  1. //아래와 같이 chooseOption이 적용 된 selectbox가 정의 된 경우.
  2. <xf:select1 id="selectbox1" chooseOption="true" style="position: relative;width: 148px;height: 21px;"disabledClass=" w2selectbox_disabled" appearance="minimal" >
  3. <xf:choices>
  4. <xf:item>
  5. <xf:label><![CDATA[남성]]></xf:label>
  6. <xf:value><![CDATA[M]]></xf:value>
  7. </xf:item>
  8. <xf:item>
  9. <xf:label><![CDATA[여성]]></xf:label>
  10. <xf:value><![CDATA[F]]></xf:value>
  11. </xf:item>
  12. </xf:choices>
  13. </xf:select1>
  14. selectbox1.setSelectedIndex(1); //chooseOption속성이 true임으로 "남성" 항목이 선택된다.



웹스퀘어 홈페이지에 나와있는 것처럼 index로 항목을 선택하는 기능이다. 


comboboxId.setSelectedIndex()  이런식으로 하면 되고 index는 0부터 시작하기 때문에 3번째 항목을 디폴트로 보여주고 싶으면 


comboboxId.setSelectedIndex(2) 라고 써주면 된다. 


10월 18, 2023

Websquare Grid 모든 행을 scroll 없이 볼 수 있는 법 - visibleRowNum

 Websquare에서 많이 사용되는 것 중 하나가 gridView이다. 데이터를 받아와서 여러 행을 테이블 형식으로 보여주는데, 이때 css를 어떻게 제어할지에 대해 고민을 해봐야 한다. 

height를 css 속성으로 설정을 하더라도, 원하는 데이터의 양이 해당 height를 넘게 되면 scroll이 생긴다. 


만약 스크롤 없이 사용하고 싶다면 "visibleRowNum" 이라는 속성을 사용하면 된다. 


"visibleRowNum" 속성을 사용하면 데이터 그리드에서 한 번에 보이는 행의 수를 제어할 수 있다. 이 속성은 그리드가 표현할 수 있는 행의 수를 조절하는 데 사용되고, "visibleRowNum"의 값은 다음과 같은 여러 가지 옵션 중 하나로 설정할 수 있다.


1. visibleRowNum="all"

  1. "all" 값으로 설정하면 그리드에서 모든 행을 한 번에 표시한다. 이렇게 하면 그리드가 스크롤 없이 모든 데이터를 화면에 표시할 수 있어서 자주 사용하는 옵션이다.


2. 특정 숫자값
  1. 숫자 값을 설정하면 그리드에서 한 번에 표시할 행의 수를 지정할 수 있다. 예를 들어 visibleRowNum="5"라고 속성을 설정하면 그리드에서 한 번에 5개의 행을 표시할 수 있고 데이터가 이 보다 많을 경우 사용자는 스크롤하여추가 행을 볼 수 있습니다.