CODEWITHSUNDEEP
asp.net-mvcteleriktelerik-grid
Paul
Paul

Reputation: 103

Telerik grid and large cells

I have problem with ASP.NET MVC Telerik Grid. In my grid I have comment column and some columns contains too large text. This effects to row height. I need that all rows have same height. How I can reduce the text? I tried to add HTML abbr, but it doesn’t work.

Best regards Paul.

Upvotes: 1

Views: 2475

Answers (1)

Daniel
Daniel

Reputation: 5732

Using custom formatting, you can check the length of your text, and if the text length is greater than a certain number, you can limit the length by using substring. For example, if your comment column is called "Comment", you could do something like this:

Html.Telerik().Grid(Model)
.Name("MyGrid")
.CellAction(cell => 
  {
    if (cell.Column.Title != null)
    {
      if (cell.Column.Title.Equals("Comment"))
      {
        if (cell.DataItem.Comment.Length > 25)
        {
          cell.Text = cell.DataItem.Comment.Substring(0, 25) + "...";
        }
      }
    }
  });

Update You asked about showing the complete comment. I don't know of a simple way built into the telerik control, but you can do it using css. I am using css code from kollermedia.at, but there are lots of examples of css tooltips if you want a different style.

In your css, put something like this:

/* tooltip */
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

Then change the line in your view to this:

cell.Text = "<a class=\"tooltip\" href=\"#\">" + cell.DataItem.Comment.Substring(0, 25) + "<span>" + cell.DataItem.Name + "</span></a>";

When you hover over the shortened text, the complete text is displayed in a tooltip.

Upvotes: 1

Related Questions