[Blazor] Telerik Grid의 특정 컬럼 header에 tooltip 추가하기

 

<TelerikGrid Data="@GridData"
             Height="@Height"
             FilterMode="@GridFilterMode.FilterMenu"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             Pageable="true"
             PageSize="@PageSize">
    <GridColumns>
        <GridColumn Width="200px" Field=@nameof(ProductDto.ProductName) Title="Product Name" />
    </GridColumns>
</TelerikGrid>

Telerik grid의 Product Name이라는 컬럼의 헤더에 Tooltip을 추가할 것이다.

 

 

<TelerikGrid Data="@GridData"
             Height="@Height"
             FilterMode="@GridFilterMode.FilterMenu"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             Pageable="true"
             PageSize="@PageSize">
    <GridColumns>
        <GridColumn Width="200px" Field=@nameof(ProductDto.ProductName) Title="Product Name">
            <HeaderTemplate>
                <span class="product_tooltip">Product Name</span>
                <TelerikTooltip TargetSelector=".product_tooltip">
                    <Template>
                        @statusMessage
                  </Template>
                </TelerikTooltip>
            </HeaderTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>


@code
{
	string statusMessage = "test";
}

컬럼의 HeaderTemplate 안에 tooltip class를 생성한 후 그 클래스에 대해 tooltip을 추가한다.

HeaderTemplate을 추가하면 Column의 Title 속성은 적용되지 않는다.

따라서 Header Template 안에 Column header name을 추가해줘야 한다.