asp.net 如何在telerik列中允许长文本中的某些特定字符

gdx19jrr  于 2023-01-14  发布在  .NET
关注(0)|答案(4)|浏览(147)

我有一个应用程序在asp.netMVC和使用telerik网格显示记录。现在我的一个领域有一些大的文本约1000字符,由于文本是越来越纵向扩展和布局是不好看。是否有任何方法显示列中特定数量的字符,并在鼠标悬停时在工具提示中显示整个文本,或任何其他方法来显示完整的列文本。
谢谢

bxpogfeg

bxpogfeg1#

对于ASP.NETMVC,当你使用TemplateColumn时,你可以完全控制网格中的列呈现。在这种情况下,你可以像这样处理长值:

<% Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns => 
        {
            columns.Template(c => {
            %>
                <span title="<%= c.FieldName %>"><%= c.FieldName.Elipsis(50) %></span>
            <%
            });
        })
        .Render();
 %>

其中“Elipsis(int)”可能是您为String创建的扩展方法,用于将字符串截断为特定长度,然后添加“...”(注意:这显然将仅对服务器绑定起作用)。
另一种选择是使用jQuery和Elipsis插件来定位元素并截断它们。如果使用Template列来为SPAN指定一个特定的类或ID,则可以轻松地使用jQuery选择器来应用Elipsis效果。下面是一个示例插件:
http://www.electrictoolbox.com/ellipsis-html-css/
您可以更进一步,使用Grid的CellAction事件(同样,用于服务器绑定),并选择性地应用jQuery效果。
http://demos.telerik.com/aspnet-mvc/grid/customformatting

vsnjm48y

vsnjm48y2#

在WinForms Telerik控件中,我已经实现了类似的功能。请在您的www.example.com Telerik控件中尝试一下asp.net。
使用Max Length属性显示特定数量的文本,然后像这样使用它。

private void yourGrid_ToolTipTextNeeded(object sender, Telerik.WinControls.ToolTipTextNeededEventArgs e)
{
    GridDataCellElement cell = sender as GridDataCellElement;
    if (cell != null)
    {
        GridViewRowInfo rowInfo = cell.RowInfo;
        string columnHeaderName = CommonMethods.GetStringValue(rowInfo.Cells[cell.ColumnIndex].ColumnInfo.UniqueName.ToLower());
        if (columnHeaderName.ToLower().Equals("usagetype"))
        {
            e.ToolTipText = CommonMethods.GetStringValue(cell.Value);
        }
    }
}

让我检查一下您可以在哪些事件中执行此操作。

2izufjch

2izufjch3#

您也可以使用CSS3解决方案。
你只需要应用到网格的TD。我现在使用的版本是带有Telerik网格的class .t-grid。
一种解决方案是在样式表中添加CSS属性text-overflow,您将能够将其设置为省略号

.t-grid td
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis 
}

它似乎与最新的IE,FF和Chrome一起工作。

jhiyze9q

jhiyze9q4#

我添加了一些样式参数沿着@帕特里克提到了这些参数。您可以试试这个

.t-grid td
    {
    border-style:solid;
    border-width:0;
    border-left-width:1px;
    vertical-align:middle;
    white-space:nowrap;
    line-height:1.6em;
    overflow:hidden;
    text-overflow:ellipsis
    }

我希望这会有所帮助。

相关问题