Telerik blogs

We are proud to announce that the rich set of client and server-side features in RadGrid has grown with two new long-awaited members. Starting with the Q2 2012 Beta release we have introduced the option to add MultiColumn headers to RadGrid and a new flexible client-side template for the GridTemplateColumn. Below I will present in short each of the two features and how they can help you visualize and summarize your data in much cooler ways.

First we’ll start with the MultiColumn headers. This feature gives you the ability to build arbitrary complex structure on top of your headers which summarizes the data and gives a much better overview for the end-user.

For example one such structure could look like this:

MultiColumn Headers

As you can see the defined hierarchy of headers provides almost endless possibilities for data summarization. What is more awesome you get to keep the familiar client-side features on the column headers as well. For example column reordering, sorting, drag-to-group and many others are still going to work.

And all of this is strikingly simple to define in the markup:

All you need to do is define how many layers of headers you want to have (called ColumnGroups in the markup), specify the name, possibly a parent header and caption and you are done. Then you only have to set which column belongs to which group and RadGrid does all the rest. It will even prompt you with validation errors if the structure is not defined correctly.

Here is how the above example is defined in markup:
ColumnGroups

Last but not least we also provide full options for styling of every bit of the structure. Each multiheader row is decorated with a separate CSS class “rgMultiHeaderRow” which you can use to apply specific styling. If you prefer using the server-side properties you also have the option to apply separate styles per grid or MasterTableView level (using the MultiHeaderItemStyle property) or directly to a specific cell using the HeaderStyle property of the GridColumnGroup.

Feel free to check out the new MultiColumn headers on our live demo or dig deeper into the API of the structure at the following help topic and let us know what you think!

Following I’ll give you more insight on another often requested feature – the ClientItemTemplate of the GridTemplateColumn. Ever tried to initialize a template control in a grid with client-side binding? If so, then you have inevitably come across the multiple hitches and drawbacks accompanying this approach. Well, the struggle is over – with the ClientItemTemplate of the GridTemplateColumn, you can easily create neat and flexible templates entirely on the client and benefit from all the goodies it brings. No more trouble with your templates during sorting, paging, filtering – they will remain intact and working after any client-side operation.

Now a few quick hints on how you can get started with the new client-side templates.

First of all you define the template like any other template of the GridTemplateColumn and poor there the necessary HTML. Then comes the real strength of the feature – it utilizes the powerful Kendo-like binding expressions outlined below.

Format Name Description
#= ... # Data Evaluates the Javascript code expression or a string property from the data item and outputs the result in the template.
# ... # Code Evaluates the JavaScript code expression inside. Does not output value.
#: ... # HTML-encode Same as the data expression, but HTML-encodes the result.

Using the above expressions you can easily shape your client-side data in the preferred way, HTML-encode the result of the expressions or even execute your custom javascript code which further modifies the data.

Here is short sample that illustrates ClientItemTemplate with binding expressions:
ClientItemTemplate

Do not hesitate to find out on what else the client-item template is capable of by checking out the related live demo and help topic.


To see these and more of the awesome features prepared for Q2 2012 we invite you to join our webinar week.

Webinar Week


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments

Comments are disabled in preview mode.