[Blazor] Grid의 각각의 cell에 tooltip 추가하기

grid에서 데이터의 길이가 칸의 width보다 긴 경우 데이터를 잘라서 표현한 후 tooltip을 추가할 것이다.

예를 들어 데이터는 abcdefg인데 cell의 길이는 5자라고 가정한다면 abcde...을 표현하고

mouseover시 tooltip에 abcdefg를 출력한다는 것이다.

 

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

<TelerikGrid>
	<GridColumns>
    	<GridColumn Field="@nameof(W_DCN.STATUS)" Width="47px" Title="Status" OnCellRender="@OnCellRenderHandler">
            <Template>
            @{
                var currItem = context as W_DCN;
                if (currItem.STATUS?.Length > 21)
                {
                    <span title="@currItem.STATUS" id="@( "tooltip-status")">@(currItem.STATUS.Substring(0,21) + "...")</span>
                    <TelerikTooltip TargetSelector="@( "#tooltip-status")" Position="@TooltipPosition.Top" />
                }
                else
                {
                    @currItem.STATUS
                }
            }
   	 		</Template>
		</GridColumn>
    </GridColumns>
</TelerikGrid>


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

STATUS 컬럼에서 데이터의 길이가 21자가 넘을 경우 잘라서 표현하고 tooltip을 추가하고,

길이가 21자가 넘지 않는다면 그냥 데이터를 뿌린다.

 

OnCellRenderHandler 메서드는 cell의 class를 지정하여 style을 지정해주기 위한 메서드다.

(21자를 기준으로 잘랐지만 대문자, 소문자, 특수문자 등등의 상황으로 인해 차지하는 width는 달라진다. 21자로 잘랐음에도 불구하고 2줄로 표현될 경우가 있기 때문에 이런 경우 OnCellRenderHandler에서 지정해준 class의 style을 지정하여 overflow를 처리한다.)

 

 

 

 

<Reference>

Show Ellipsis for Long Content and view all Content in Tooltip in UI for Blazor | Telerik Forums