How to allow some specfic character from long text in telerik column

Question

hi I have an aplication in asp.net MVC and using telerik grid for displaying the record. Now one of my field has some large text about 1000 character due to which the text is getting extended vertically and layout is not looking good. Is there any way to show some specific number of character in the column and show the whole text in a tool tip on mouse hover or any other way to show the complete text for that column.

Thanks

Answer 1

In winfrom Telerik controls I have implemented it like. Try it in your asp.net Telerik controls.

Use Max Length property to display specific number of text and then use it like.

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);
            }
        }
    }

Let me check in which event you can do this.

Answer 2

For ASP.NET MVC, you have complete control over column rendering in the Grid when you use a TemplateColumn. In that case, you could do something like this to handle long values:

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

Where "Elipsis(int)" is potentially an Extension Method that you create for String to truncate a string to a specific length and then add the "..." (note: this will obviously only work for server binding).

Another option is to use jQuery and an Elipsis plug-in to target your elements and truncate them. If you use the Template column to give your SPANs a specific class or ID, you can easily use jQuery selectors to apply the Elipsis effect. Here is an example plug-in:

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

You can go even further and use the Grid's CellAction event (again, for server binding) and apply your jQuery effect selectively. For more on CellAction, see this online demo:

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