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개의 행을 표시할 수 있고 데이터가 이 보다 많을 경우 사용자는 스크롤하여추가 행을 볼 수 있습니다.