Background

Windows 8 comes with a ListView control that does a nice job of providing a customizable list of values.  But often in data intensive applications, what would really hit the spot is a true data grid. ListViews do not allow commonly used data tasks such as sorting, grouping, and filtering, just to name a few.  Fortunately, Telerik has provided on for both HTML and XAML.  In this post, I am going to change the Event List home page for Conference Buddy  from a ListView to a Telerik RadGrid in just a few easy steps. 

This blog post introduces the RadGrid, binds it to a View Model, and shows specifying the fields to display.

RadGrid for HTML Blog Series:

 

The Data

For this sample, I am using a class based observable collection as outlined in my series of posts on MVVM in WinJS. The Events are constructed in an observable WinJS class (Event.Model.EventData.Event) contained in an observable collection (Event.Model.EventData.eventList). For the full code, down the source code here.

NOTE: For information on the XAML version of the RadGrid, please see this excellent post from Jesse Liberty, my good friend and fellow Evangelist at Telerik.

The Conference Buddy Home Page

The current home page for Conference Buddy lists all of the events stored in the application, as in Figure 1.  As additional records get added, they continue in the columns to the right.  What if the user wants to see the events that are happening in Kentucky?  That’s a lot of extra work for the developer, plus a little bit of mind reading is necessary as well to predict what the user will want to do with the data!

image
Figure 1 – The Current Conference Buddy Home Page

The Goal

Our end goal is a full on Data Grid showing the columns that are important for a landing page, correctly formatted, with sorting, filtering, and selection.

Taking the First Steps

Adding the Reference, CSS, and JavaScript files

The first step to adding a RadGrid to Conference Buddy is to add a reference to the Telerik RadControls for Windows 8 HTML (version 2013.1.219 or later).  Once the reference is in place, add the two JavaScript files and the commons.css file.  The final step is to add either the dark.css or light.css file.  NOTE: I prefer the light theme, so for this post I have added light.css. 

<!-- Telerik References --> 
<link href="/Telerik.UI/css/common.css" rel="stylesheet" /> 
<link href="/Telerik.UI/css/dark.css" rel="stylesheet" /> 
<script src="/Telerik.UI/js/jquery.js"></script> 
<script src="/Telerik.UI/js/ui.js"></script> 
 

List 1 – Adding the Telerik Files

Adding a RadGrid

You can either add a RadGrid by typing a div tag and adding “Telerik.UI.RadGrid” as the data-win-control or you can add the grid through Blend (although I am not going to cover that mechanism in this post).  The set the dataSource in the data-win-options attribute to the Event.Model.EventData.eventList. This is the simplest way to create a grid, and it automatically creates the columns based on the properties of the objects contained in the list. 

<div id="eventsGrid" data-win-control="Telerik.UI.RadGrid" 
 data-win-options="{dataSource:Event.Model.EventData.eventList}"> 
</div>

Listing 2 – Adding a RadGrid

Showing the Results

If you run the program at this point, we see all of our data displayed in a tidy little grid as displayed in Figure 2.  Not fully functional yet, and more columns than we want to show, but we’ll get to that.  Still, not bad for one line of markup!

image
Figure 2 – The First Grid

Binding the MVVM Way

One downside of binding in the data-win-options attribute is that it requires the full path of the data source.  This stands in the face of separation of concerns. It is much better to use the flexibility of the data-win-bind attribute so the coupling between the control and the data source is loose.  This takes a little more code than binding through the options, but it is not significant, and I strongly recommend adhering to the MVVM pattern where possible.

Adding a Telerik Data Source

When binding collections to RadControls, you need to use a Telerik DataSource object, which takes a collection (JavaScript Arrays and WinJS Binding Lists among others) in its constructor.  I usually create this in a View Model as in Listing 3.

(function () { 
    "use strict"; 
    WinJS.Namespace.define("Default.ViewModel", { 
        telerikEventList: new Telerik.Data.DataSource(
            Event.Model.EventData.eventList),
    }); 
})();
Listing 3 – Add a Telerik DataSource to the View Model

Changing the Markup

When binding through the data-win-bind attribute, it is important to remember to bind to the winControl properties, as in Listing 4.  When binding to a Telerik Data Source, you also do not specify “dataSource” like you do with WinJS Binding Lists.

<div id="eventGrid" data-win-control="Telerik.UI.RadGrid" 
 data-win-bind="winControl.dataSource:telerikEventList"> 
</div>
Listing 4 – Specifying the Control’s Datasource

Setting the Context

As with any controls that are configured with the data-win-bind attribute, you must call WinJS.Binding.processAll().  There is an additional step that must be done with the RadGrid any time changes are introduced after the control is rendered.  That is a call to refresh() on the RadGrid control itself.  Both of these lines of code are shown in Listing 5.

WinJS.Binding.processAll(eventGrid, Default.ViewModel);
eventGrid.winControl.refresh();
Listing 5 – Setting the Data Context for the RadGrid

Choosing Columns

Of course showing all of the fields in the data might not be optimal. Fortunately, specifying the fields to display is very straightforward as well.

The RadGrid has a columns property that takes in an array of objects.  The most important property is the “field” property that specifies the data field to display.  Additional, you can set the header text with the “title” property and the column width with the “width” property.   

NOTE: There are many more options that are available for columns, but are beyond the scope of this post, and will be covered in subsequent posts on the RadGrid.

Specifying Columns in Markup

If you are binding the RadGrid through the data-win-options, you can specify the fields in the columns object, as shown in Listing 6. 

<div data-win-control="Telerik.UI.RadGrid" 
 data-win-options="{
 
        dataSource:Event.Model.EventData.eventList,
        columns: [
        {field: 'name'},
        {field: 'city', title: 'City'},
        {field: 'state', title: 'State'},
        {field: 'country', title: 'Country'},
        {field: 'startDateFormatted', title: 'Start Date'},
        {field: 'endDateFormatted', title: 'End Date'},
        ]
        }"
> 
</div>
Listing 6 – Specifying the Fields/Columns in Markup

Specifying Columns in Code

You can also specify the columns in code.  The simplest way is to assign the columns property of the winControl as in Listing 7.

eventGrid.winControl.columns = [
    {field: 'name'},
    {field: 'city', title: 'City'},
    {field: 'state', title: 'State'},
    {field: 'country', title: 'Country'},
    {field: 'startDateFormatted', title: 'Start Date'},
    {field: 'endDateFormatted', title: 'End Date'},
];

Listing 7 – Assigning the Columns in Code

Assigning the Columns with a View Model

The third parameter in creating WinJS Class allows for the definition of static members for the class.  If this is a common column definition, then using a static property on the model is a great mechanism to ensure separation of concerns on not repeating yourself. The code for creating the static property is shown in Listing 8, and the assignment is shown in Listing 9.

{
    fields: [
        {field: 'name'},
        {field: 'city', title: 'City'},
        {field: 'state', title: 'State'},
        {field: 'country', title: 'Country'},
        {field: 'startDateFormatted', title: 'Start Date'},
        {field: 'endDateFormatted', title: 'End Date'},
    ]             
}
Listing 8 – Creating the Static Fields property of the Event Class
eventGrid.winControl.columns = Event.Model.EventData.Event.fields;

Listing 9 – Assigning the Columns Property using Static Class Field

Specifying Widths

By default, the RadGrid is styled to fill the width of it’s container, and the column widths are automatic.  This can present less than optimal results depending on the needs of your application.  For Conference Buddy, I wanted to tighten up the grid, so I specify the widths for the columns that I know won’t have much variances in the length of the data they contain.  In this case example, those columns are State, Country, and the Date columns.  To specify the width, add another property to the column object named “width”, as in Listing 10.

{
    fields: [
        { field: 'name', title: 'Name'},
        { field: 'city', title: 'City'},
        { field: 'state', title: 'State', width: 70 },
        { field: 'country', title: 'Country', width: 90 },
        { field: 'startDateFormatted', title: 'Start Date', width: 105 },
        { field: 'endDateFormatted', title: 'End Date', width: 95 },
    ]                
}),
 

Listing 10 – Specifying Widths for Columns

The final step is to specify the width of the RadGrid itself. This is done simply by adding a style attribute to the div tag that contains the RadGrid, as in Listing 11.

<div style="width:710px" id="eventGrid" data-win-control="Telerik.UI.RadGrid" 
 data-win-bind="winControl.dataSource:telerikEventList"> 
</div>
Listing 11 – Specifying the width of the RadGrid

Resulting Grid

Once you have specified the columns to display, the grid shows the same data as the ListView that we started with, but in a manner that users are used to seeing, as shown in Figure 3.  Next, we’ll add in the additional capabilities like sorting, filtering, and grouping to enhance the user’s experience. 

image
Figure 3

Summary

There are many more options available, including cell formatting, selection, sorting, filtering, grouping, and much, much, more.  ListViews are extremely useful, but sometimes there’s nothing like a Grid!

Down the source code here.



Next Post: Adding Formatting for Data and Columns and Sorting to the RadGrid for Windows 8 HTML


Japikse
About the Author

Phil Japikse

is an international speaker, a Microsoft MVP, ASPInsider, INETA Community Champion, MCSD, CSM/ CSP, and a passionate member of the developer community. Phil has been working with .Net since the first betas, developing software for over 20 years, and heavily involved in the agile community since 2005. Phil also hosts the Hallway Conversations podcast (www.hallwayconversations.com) and serves as the Lead Director for the Cincinnati .Net User’s Group (http://www.cinnug.org). You can follow Phil on twitter via www.twitter.com/skimedic, or read his personal blog at www.skimedic.com/blog.

 

Comments

Comments are disabled in preview mode.