Как разрешить какой-то специфический символ из длинного текста в столбце telerik

Question

У меня есть приложение в asp.net MVC и использую Telerik Grid для отображения записи. Теперь в одном из моих полей есть какой-то большой текст длиной около 1000 символов, из-за чего текст расширяется по вертикали, а макет выглядит не очень хорошо. Есть ли способ показать определенное количество символов в столбце и показать весь текст во всплывающей подсказке при наведении мыши или любым другим способом показать полный текст для этого столбца.

Спасибо

Answer 1

Для ASP.NET MVC у вас есть полный контроль над рендерингом столбцов в Grid при использовании 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 определенного класса или идентификатора, вы можете легко использовать селекторы jQuery для применения эффекта Элипсиса. Вот пример плагина:

http://www.electrictoolbox.com/ellipsis-html-css/

Вы можете пойти еще дальше и использовать событие Grid CellAction (опять же, для привязки к серверу) и применять свой эффект jQuery выборочно. Подробнее о CellAction смотрите в этой онлайн-демонстрации:

http://demos.telerik.com/aspnet-mvc/grid/customformatting

Answer 2

В элементах управления winfrom от Telerik я реализовал это следующим образом.Попробуйте это в своих элементах управления asp.net Telerik.

Используйте свойство Max Length для отображения определенного количества текста, а затем используйте его как.сделай это.

Answer 3

Я добавил еще несколько параметров стиля, о которых упоминает @Patrick. Вы можете попробовать это

.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
    }

Надеюсь, это будет полезно.

Answer 4

Вы также можете использовать решение CSS3.

Вам просто нужно обратиться к TD сетки. Текущая версия, которую я использую, имеет класс .t-grid с сеткой Telerik.

Решением является добавление в таблицу стилей свойства CSS text-overflow, и вы сможете установить его на ellipsis .

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

Кажется, он работает с последними версиями IE, FF и Chrome.