Cell formatting. Reducing the size of text in a Kendo UI grid.

Here's something I ran into while using MVC3/Razor & Kendo UI by Telerik. I needed a way to minimize what was shown in the grid cells. In my case I wanted to shorten the width of a column containing email addresses. Since there aren't spaces in email addresses, word wrapping is not going to happen.

So here's how I went about it (using Kendo UI Grid (MVC Template version)):

To shorten the length of an email address displayed in a row so it will fit better I did the following (same method can be applied to shorten a paragraph or other text):

I bind my column in my grid and applied a client template.

columns.Bound(c => c.Email).ClientTemplate(string.Format("{0}...", "#= formatter(Email) #"));

I wrote a javascript function to handle the formatting:

<script type="text/javascript">

    function formatter(value) {

        return value.substring(0, 10);

    }

</script>