我想在 GridBoundColumn 'Observation' 中添加省略号

Question

<telerik:RadGrid ID="rgvRigObs" runat="server" GridLines="None" >
    <GroupingSettings CaseSensitive="False"></GroupingSettings>
    <ClientSettings>
        <Selecting AllowRowSelect="false" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" EnableVirtualScrollPaging="true" />
        <Resizing AllowColumnResize="true" AllowResizeToFit="true" />
    </ClientSettings>
    <MasterTableView TableLayout="Fixed" AutoGenerateColumns="false" PageSize="20"        AllowPaging="true"
        AllowMultiColumnSorting="False">
        <CommandItemSettings ExportToPdfText="Export to PDF" />
        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
        </RowIndicatorColumn>
        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
        </ExpandCollapseColumn>
        <Columns>
            <!--Some other columns -->
            <telerik:GridBoundColumn DataField="Observation" FilterControlAltText="Filter Observation column" HeaderText="Observation" UniqueName="Observation">
                <HeaderStyle HorizontalAlign="Left" Wrap="false" Width="350px" />
                <ItemStyle HorizontalAlign="Left" Wrap="false" Width="350px" />
            </telerik:GridBoundColumn>
    <!--Some other columns -->
        </Columns>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
        <PagerStyle AlwaysVisible="True" PageButtonCount="20" />
    </MasterTableView>
    <FilterMenu EnableTheming="True" Skin="Default">
        <CollapseAnimation Duration="200" Type="OutQuint" />
    </FilterMenu>
    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Office2010Silver">
    </HeaderContextMenu>
</telerik:RadGrid>

观察栏一次可能需要250个字符。我想在该列中添加省略号功能。找不到任何适用于经典 asp.net telerik 的文档

到目前为止我已经尝试过自定义js。

function columnResized(sender, args) {
    var grid = sender;
    var column = args.getTableView().getColumns()[args.getResizedColumn().get_uniqueName()];

    if (column.get_element() && column.get_element().style.width) {
        column.get_element().style.width = args.getResizedColumnWidth() + 'px';
    }
} 

我在 RadGrid 的 ClientSettings 中调用了它。

Answer 1

将此样式添加到页面：

<style>
    .ellipsis {text-overflow:ellipsis;}
</style>

并以项目样式使用它：

<ItemStyle HorizontalAlign="Left" Wrap="false" Width="350px" CssClass="ellipsis"/>