Category Archives

18 Articles

Posted by .Ronald on

Telerik Grid ClientTemplate with collection inside column

I have defined a ClientTemplate which needs to display an employee and its roles as a list of items inside a single column.

Take following example:

Model person.cs:

public class Person
{
public Guid Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string[] Roles { get; set; }
}

The grid looks like this:

<%= Html.Telerik().Grid()
.Name("Employees")
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("Employees", "Persons"))
.Columns(columns =>
{
columns.Bound(e => e.Id);
})
.DetailView(dv => dv.ClientTemplate(
"Name: <#= LastName #>, <#= FirstName #><br%>" +
"Roles: <ul%>" +
/* Person.Roles comes here: "<li%><#= Roles[i] #>"
"</li%></ul%>"
))
%>

Is there a way to have the roles op the employee displayed as an list inside the same column?

Yes there is!

You can embed executable code in your client template like this:

ClientTemplate("Roles: <ul>" +
"<# for (var i = 0; i < Roles.length; i++) {" +
"#> <li><#= Roles[i] #></li> <#" +
"} #>" +
"</ul>")

Many thanks to Atanas Korchev of the Telerik team for answering my question: ClientTemplate with collection inside.

Posted by .Ronald on

50 Useful Design Tools For Beautiful Web Typography | CSS, Fonts | Smashing Magazine

Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right.

Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website.

Below we cover typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography.

Smashing Magazine50 Useful Design Tools For Beautiful Web Typography

Posted by .Ronald on

Design for Developers

A few years ago I had the opportunity to sit down with a designer possessed of a rare talent. We were both part of the same team and he was creating some UI elements that I was to wire up. As I sat there (in awe) watching him work I realized that much of his considerable skill was rooted in fundamentals not unlike the art of programming. Of course, there are design skills that are intuitive that can’t be "learned." But, that can also be said of the logical clarity found in a really elegant data model or a brilliant inheritance tree. I am certainly no designer, but I have observed the more creative among us for several years and have gained some insight into their world. In this article I’ll share some basic principles that can help raise your design acumen and improve the experience of your users.

SYS-CON MEDIADesign for Developers

Posted by .Ronald on

10 Useful Techniques To Improve Your User Interface Designs

Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. Without further ado, let’s get started.

Smashing Magazine10 Useful Techniques To Improve Your User Interface Designs