Web Components 트리 그리드 크기 조정

The Ignite UI for Web Components Sizing feature in Web Components Tree Grid is an important aspect of creating responsive and user-friendly grid interfaces. The Web Components Tree Grid Sizing feature enables users to adjust the width and Height of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the IgcTreeGridComponent, they are taken into its width/height size calculations or also known as Border box sizing. It is applied in all scenarios.

[!Note] If the Border box sizing is overridden by the user we cannot guarantee that the IgcTreeGridComponent will size correctly.

Web Components Tree Grid Width

입력에width 값이 할당되어 있지 않으면 기본값은 이며100%, 사용IgcTreeGridComponent 가능한 공간을 채우려고 시도합니다. 해당 섹션에서Percentages 그리드가 어떻게 반응하는지 확인할 수 있습니다.

[!Note] Setting manually the width style of the IgcTreeGridComponent itself will result in an unexpected behavior.

Null

그리드는width 값을 받아들일 수 있고, 이 값을null 설정하면 DOM의 모든 열을 렌더링합니다. 격자 크기는 그에 맞게 조정되어, 열 가상화가 적용되지 않아 그리드 수평 스크롤바가 없습니다.

6개의 열이 있고 그 중 어느 열도 너비가 정의되어 있지 않다면, 격자는 다음과 같습니다.width의816px, 각 열은 기본적으로 할당width의136px이 시나리오에서는요. 열들이 다음에 있을 때도 같은 일이 일어납니다.width 백분율로. 수직 스크롤바가 렌더링되거나 추가 열을 렌더링하는 기능이 있다면 그 열의 너비도 추가됩니다.

열 너비가 설정된200px 열이 6개라면 창에 모두 들어갈 수 있고 모두 보입니다:

더 많은 열이나 폭이 더 큰 열이 브라우저 시야 밖으로 나가면 모두 렌더링됩니다. 열의 개수는 같지만 각 열의 너비는 다음과300px 같습니다. 모든 것이 브라우저 뷰 영역에 들어가지 않기 때문에, 기본적으로 스크롤바가 생성됩니다. 다음 예시는 바로 이 상황을 보여줍니다:

그리드에 어떤 형태로든 부모 요소가 있고 오버플로우 설정이 없으면 모든 열이 보이게 됩니다. 그렇지 않으면 부모 요소에 오버플로autoscroll 우가 있으면 해당 부모 요소의 스크롤바가 네이티브로 렌더링됩니다. 다음 예시에서 부모 높이가 더 커서 시각화가 용이합니다.

[!Note] Due to this behavior, if the grid data contains too many columns, it might have significant impact on the browser performance, since all columns would be rendered without virtualization.

Pixels

입력이 픽셀로 설정되면IgcTreeGridComponentwidth 전체 그리드 크기를 그 값으로 설정하고 정적으로 표시됩니다. 브라우저 크기 조정이나 DOM 변경에 반응하지 않지만, 그리드 콘텐츠에는 해당되지 않습니다:

그리드가 수평 스크롤바를 렌더링하기 위해 폭을 픽셀 단위로 설정하면, 콘텐츠 폭이 지정된 그리드width 보다 더 넓어야 합니다. 예를 들어, 열의 전체 너비가 초과1200px 된다고 가정해 봅시다. 이 경우 수평 스크롤바가 렌더링됩니다.

그리드에 부모 요소가 있는 경우, 부모 스타일링이 스크롤 바를 렌더링할지 여부에 따라 달라집니다. 그리드 자체와 관련된 나머지 모든 요소는 여전히 유지됩니다. 부모 요소의 너비가 그리드 너비보다 작고 오버플로우 스타일이 다음과 같이 설정되어 있다면auto 또는scroll이 장치는 스크롤바를 네이티브로 렌더링합니다. 예를 들어, 부모가width 다음1000px 그리고IgcTreeGridComponent width 아직도1200px, 다음 그림들과 유사하게 보일 것입니다:

Percentages

의width를IgcTreeGridComponent 백분율로 설정하면 부모 요소의 너비에 따라 격자 크기를 조정합니다. 부모 요소에 너비가 지정되어 있지 않으면,IgcTreeGridComponent 브라우저 창에 대한 윌 크기가 결정됩니다.

예를 들어, 그리드width 입력을 로100% 설정하고 부모 요소가 없으면 브라우저 창의 가용 폭을 100% 채웁니다. 크기를 조정하면 그리드도 그에 맞게 크기가 조정됩니다.

그리드의 너비를 로100% 설정하고 특정 너비1200px를 가진 부모 요소가 있다면, 그리드의 크기는 해당 요소에 대해 비례하고 최종 너비는 다음과1200px 같습니다.

만약 부모 요소가width와1000px 그리드가width가150% 설정되어 있다면, 계산된 그리드 너비는 가 됩니다1500px. 이 경우 그리드는 여전히 완전히 보이게 렌더링되지만, 부모를 설정overflow: auto 하면 그 부모가 스스로 스크롤바를 렌더링합니다.

Web Components Tree Grid Height

기본적으로 에IgcTreeGridComponent 높이가 정의되지 않은 경우, 는 로100% 설정됩니다. 해당 섹션의Percentages DOM 구조에 따라 그리드가 어떻게 반응하는지 확인할 수 있습니다.

[!Note] Setting manually the Height style of the IgcTreeGridComponent itself will result in an unexpected behavior.

Null

The IgcTreeGridComponent Height input can accept null value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway.

이 경우 14개 행이 있는 데이터가 있는 경우 그리드는 14개 행을 모두 렌더링하고 그리드 내부에 빈 공간 없이 모두 표시되도록 그리드 크기를 조정합니다.

대신 24개의 행이 있는 경우 그리드는 여전히 모든 행을 렌더링하지만 행이 너무 많기 때문에 브라우저 경계를 초과합니다. 이것이 바로 브라우저 자체가 기본적으로 세로 스크롤 막대를 렌더링하여 사용자가 나머지 행까지 아래로 스크롤할 수 있게 하는 이유입니다.

If there is a parent element with defined Height, the grid will still render all rows and not be affected. Let's say the parent has Height of 650px. If it has overflow set to auto or scroll, it will render a vertical scrollbar but the grid will still be unaffected:

[!Note] Due to this behavior, if the grid data contains too many rows, it might have significant impact on the browser performance, since all rows would be rendered without virtualization.

Pixels

Setting the IgcTreeGridComponent Height in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how width is set in pixels.

예를 들어, 데이터의 높이500px를 4행으로 설정하면 그리드가 그 크기로 유지되고, 4행으로는 보이는 영역을 채우기에 부족하므로 빈 영역이 있을 것으로 예상됩니다.

만약 행 수가 픽셀로 설정되었을 때Height 그리드의 가시 영역을 초과하면 수직 스크롤바가 렌더링됩니다. 예를 들어, 높이가 설정되어 있고 14행이 있는 격자는500px 다음과 같이 렌더링됩니다:

만약 정의된 부모 요소가Height 있다면, 또는overflow로auto 설정되어scroll 있지 않다면 그리드는 여전히 완전히 보이게 됩니다. 그렇지 않으면 스크롤바를 렌더링할 수 있습니다.

Percentages

When the Height input is set to percentages, the IgcTreeGridComponent will size based on the parent element height. If the parent element has its Height set in pixels or percentages, the grid will size relative to the size of the parent.

상위 요소에 높이가 정의되어 있지 않으면 브라우저는 처음에 높이를 할당하지 않고 하위 요소와 해당 크기에 따라 크기를 지정합니다. 이것이 바로 그리드가 이를 기반으로 백분율 크기 조정을 적용하기 위해 사용할 기본 높이를 알 수 있는 방법이 없는 이유입니다. 이러한 이유로 최대 10개의 행을 렌더링하고 행이 더 많은 경우 세로 스크롤 막대가 렌더링됩니다. 그렇지 않으면 그리드가 렌더링된 행 수에 맞춰집니다. 다음 예에서 이 시나리오를 더 자세히 살펴보겠습니다.

자,width 다음1200px 그리고 상위 요소에 크기가 적용되지 않은 경우:

행이 10개 미만인 경우 그리드는 마지막 행과 표시 영역 하단 사이에 빈 공간을 두지 않고 표시 영역의 모든 행을 맞추려고 합니다. 예를 들어 7개의 행으로 구성된 그리드 데이터가 있다고 가정해 보겠습니다. 그리드는 세로 스크롤 막대 없이 그리드 내부에 빈 공간 없이 7개 행을 모두 렌더링합니다.

행이 10개보다 많으면 나머지 행에 대해 수직 스크롤 막대가 렌더링되며 언제든지 10개의 행만 표시될 수 있습니다. 다음 예에서는 행 번호만 14로 증가됩니다.

부모 요소의 높이를 ,800pxIgcTreeGridComponent 그리고 to100%의 높이를 설정하면, 그리드의 크기가 100%800px로 됩니다.

If the IgcTreeGridComponent Height is set to a number bigger than 100% and the parent element has height, for the parent to render scrollbar it again needs to have overflow set to auto or scroll. Otherwise the grid will be fully visibly and size relative to the parent size.

브라우저 창에서 그리드의 크기를100% 원하는 경우, 두 곳 모두body와 부모 그리드 요소의 높이100%를 서로 설정해야 합니다. 이 경우 부모 요소의 크기를 조절할 수 있고, 브라우저 크기를 조정하면 그리드의 크기도 그에 맞게 조정됩니다.

Web Components Tree Grid Column Sizing

그리드 크기 자체에 따라 그 안에 있는 열의 크기도 다르게 조정될 수 있으며 이로 인해 그리드가 가로 스크롤 막대를 렌더링할지 여부가 발생할 수 있습니다. 열의 너비는 픽셀, 백분율로 설정될 수 있으며 아무것도 설정되지 않은 경우 자동 크기 조정이 가능합니다. 이 섹션에서는 이러한 시나리오에 대해 자세히 살펴보겠습니다.

Default

기본적으로 열에 지정된 너비가 없으면 자동 크기 조정을 시도해서 그리드 뷰 영역에 빈 공간이 있으면 열을 채우게 됩니다. 자동 크기 열의 최소 너비는 이136px 열에 해당하므로, 사용 가능한 면적이 그 열보다136px 작으면 기본적으로 그 크기로 유지됩니다.

이러한 시나리오에서 표 크기를 조정하면 열 너비도 변경 사항을 반영하여 업데이트되므로 사용 가능한 새 빈 공간이 채워집니다.

열에 지정된width 것이 없고 가IgcTreeGridComponentwidth로null 설정되어 있다면, 열의 크기는 최소 로136px 변환됩니다. 즉, 폭이 없는 6열의 격자width null에 대해서는 각 열의 크기136px가 로 지정됩니다.

자동 크기 열이 여러 개 있을 경우, 이들은 서로 가용 공간을 균등하게 나누게 됩니다. 즉, 열이 6개이고 빈1200px 영역이 있다면 각 열의 크기는 입니다200px.

만약 빈 공간이 있어서 자동 크기 열이 작136px 아지면, 모든 자동 크기 열은 기본값136px으로 설정되어 그리드가 수평 스크롤바를 렌더링합니다. 다음 예시에서는 자동 크기 열이 12개이고 그리드width를 다음과 같이 설정해 봅1000px 시다.

만약 열이width 명시되어 있지만, 다른 모든 열은 다음width 픽셀이나 백분율 단위로, 해당 열도 사용 가능한 공간을 채우려고 합니다. 예를 들어, 너비가 첫 번째 열에 설정되어 있지 않고 나머지 5개가 모두width의100px, 첫 번째가 나머지를 채울 것입니다.

여러 열이 지정되어 있지 않width 아도 마찬가지로 사용 가능한 공간을 똑같이 나누게 됩니다. 다음 그림에서는 첫 번째 열이 로 설정되어width 있습니다100px.

[!Note] Feature columns like Row Selector checkbox column and etc. fill additional space that is taken into account when autosizing columns.

Pixels

열이 픽셀 단위로 특정width 설정되어 있으면, 수동으로 크기를 조정하지 않는 한 그 크기를 유지합니다. 열들의 합width 산이 정적이기 때문에, 이 크기는IgcTreeGridComponent width 혹은 그 이상을 가졌다.

모든 열의 합width 산이 다음보다 작으면,IgcTreeGridComponent width 격자 안에 열이 채울 수 없는 빈 집합이 생깁니다. 이것이 기대되는 행동입니다.IgcTreeGridComponent 다음 예시에서는 열의 폭이 있습니다150px.

모든 열의 합width 산이 실제 열보다 크면IgcTreeGridComponent width, 수평 스크롤바가 렌더링됩니다. 다음 예시에서는 6개의 열 각각의 너비가 있고300px 격자의 너비가 01200px 이므로, 열을 합친 나머지 는600px 경계를 벗어납니다.

Percentages

열이 백분율로 설정width 되면 그 크기는 격자 크기에 상대적으로 계산됩니다. 픽셀 단위의 너비 방식과 유사하지만, 열에 대한 반응성을 제공해 그리드가 리사이즈되면 열도 그에 맞게 크기 조정됩니다.

모든 열100%의 너비가 작다면, 픽셀 단위일 때와 유사하게, 열이 덮지 않는 격자 빈 영역이 있을 수 있습니다.

만약 전체 너비가 정확100% 히 맞으면, 열들이 격자의 모든 공간을 채웁니다.

사용자가 열을 볼 수 있을 만큼 전체 너비100%가 초과되면, 수평 스크롤바가 렌더링됩니다.

열이 백분율로 설정되어 있고 격자도width로 설정됨null, 적용될 것이다width의136px 각 열에 해당합니다. 이는 열이 격자에 대해 상대적으로 크기를 조절할 수 없기 때문입니다. 왜냐하면 격자는width 그 자체가 그것의 크기를 조절할 때 그 내용에 의존합니다width 이야.null. 다음 예시에서 모든 6개의 열은 다음과 같습니다.width 다음50%:

API References

IgcTreeGridComponent

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.