반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

개발꿈나무

[Blazor] Grid에서 길이가 긴 데이터를 컬럼의 width만큼만 출력하기 본문

C#/Telerik

[Blazor] Grid에서 길이가 긴 데이터를 컬럼의 width만큼만 출력하기

HYOKYE0NG 2022. 2. 7. 09:42
반응형

컬럼의 width가 100px인데 해당 컬럼의 데이터가 150px인 경우 데이터의 100px만큼만 출력하고자 한다.

 

<TelerikGrid @ref="@Grid" TItem="@W_DCN" OnRead="@ReadItems"
             Sortable="true"
             SortMode="@SortMode.Single"
             FilterMode="@GridFilterMode.FilterMenu"
             Pageable="true"
             PageSize="10"
             SelectionMode="GridSelectionMode.Single">
             	<GridColumns>
                	<GridColumn Field="@nameof(W_DCN.DCN_NAME)" Width="120px" Title="Name" />
        			<GridColumn Field="@nameof(W_DCN.DESCRIPTION)" Width="180px" Title="Description" />
                </GridColumns>
</TelerikGrid>

@code
{

}

기존 소스코드에서는 데이터가 150px인 경우 2줄로 데이터가 끝까지 출력되었다.

하지만 나는 Grid의 width에 맞게 한 줄의 데이터만 출력되었음 한다.

 

<TelerikGrid @ref="@Grid" TItem="@W_DCN" OnRead="@ReadItems"
             Sortable="true"
             SortMode="@SortMode.Single"
             FilterMode="@GridFilterMode.FilterMenu"
             Pageable="true"
             PageSize="10"
             SelectionMode="GridSelectionMode.Single">
             	<GridColumns>
                	<GridColumn Field="@nameof(W_DCN.DCN_NAME)" Width="120px" Title="Name" OnCellRender="@OnCellRenderHandler" />
        			<GridColumn Field="@nameof(W_DCN.DESCRIPTION)" Width="180px" Title="Description" OnCellRender="@OnCellRenderHandler" />
                </GridColumns>
</TelerikGrid>

@code
{
	protected void OnCellRenderHandler(GridCellRenderEventArgs args)
    {
        args.Class = "custom-ellipsis";
    }
}

<style>
    .custom-ellipsis {
        overflow: hidden;
        max-height: 60px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

OnCellRenderHandler 메서드를 추가한 후

데이터를 일정 길이만 출력하고자 하는 컬럼의 OnCellRender 이벤트에 연결시켜준다.

그리고 해당 컬럼의 클래스를 설정하고 그 클래스의  style을 변경한다.

 

 

overflow: 데이터가 요소의 크기보다 길 때 어떻게 보일지 선택

  • visible: 기본값으로 내용이 더 길어도 그대로 출력(흘러내림)
  • hidden: 내용이 넘치면 자르는데 자른 부분은 보이지 않음
  • scroll: 내용이 넘치지 않아도 항상 스크롤바가 보임
  • auto: 내용이 잘릴 때만 스크롤바가 보임

 

max-hieght: 최대 높이 설정

 

text-overflow: white-space를 이용해 줄바꿈을 하지 않을 때 넘치는 텍스트 처리를 어떻게 할 지 선택

  • clip: 넘치는 텍스트 자름
  • ellipsis: 말 줄임표(...)로 잘린 텍스트가 있다고 표시
  • text-overflow 속성은 overflow 속성이 hidden, scroll, auto 이면서 white-space 속성이 nowrap일 경우만 적용됨

 

white-space: 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할 지 선택

  • normal(default): 연속된 공백과 줄 바꿈은 하나의 공백으로 표시됨, 소스 내의 줄 바꿈 문자도 공백 문자로 처리됨, 자동 줄바꿈 수행
  • nowarp: normal과 같이 공백을 채우지만 자동 줄 바꿈 하지 않음
  • pre: 연속된 공백을 그대로 표시하며, 자동 줄바꿈 하지 않음
  • pre-wrap: 연속된 공백을 그대로 표시하며, 자동 줄바꿈은 행의 박스를 채우기 위해 필요한 경우만 수행
  • pre-line: 연속된 공백은 하나의 공백으로 표시하며, 자동 줄바꿈은 행의 박스를 채우기 위해 필요한 경우만 수행 
반응형
Comments