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

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.  This is the second in a series of posts on the RadGrid, covering Data and Column Formatting and Sorting.

RadGrid for HTML Blog Series:

• Introducing the RadGrid for Windows 8 HTML
• (This post) Adding Formatting for Data and Columns and Sorting to the RadGrid for Windows 8 HTML 

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 Grid

In my last post, I changed the Conference Buddy ListView into a RadGrid (shown in Figure 1).  It’s better looking, but currently lacks the features that really make it user friendly, like better formatting, sorting, grouping and filtering.  This post will cover formatting and sorting, while Grouping and Filtering will be covered in a later post in this series.

Figure 1 – The Current Conference Buddy Home Page

Getting Started

For this post, we will be adding the Attendee Count to the Grid as well.  This is a field that we already have in the data, and it’s been determined by the Product Owner that it should be shown on the home page.  Doing so is as easy as updating our static property “fields” in the Event class to the code shown in Listing 1. Additionally, I widened each of the columns by 20 pixels to accommodate the sort icon. The new RadGrid is shown in Figure 2.  I also changed the  width of the RadGrid itself, adding 140 pixels (bringing the width property to 850px).

fields: [
 
    { field: 'name', title: 'Name'},
 
    { field: 'city', title: 'City'},
 
    { field: 'state', title: 'State', width: 90 },
 
    { field: 'country', title: 'Country', width: 110 },
 
    { field: 'startDateFormatted', title: 'Start Date', width: 125 },
 
    { field: 'endDateFormatted', title: 'End Date', width: 115 },
 
    { field: 'attendeeCount', title: 'Attendees', width: 125 },
 
]
 

Listing 1 – The Fields to be shown in the RadGrid

Figure 2 – RadGrid with Attendee Count added

Updating the Look of the Data in the Grid

Specifying Data Types

By default, the data in the column is represented as strings.  However, this can be less than ideal.  In our sample data, we have dates as well as numbers.  If we did a straight sort on this column, these columns would be sorted as strings.

To specify the data types, we need to add a fields object to the RadGrid’s schema.model data-win-option. The fields object is JSON that lists each column (the bound property, not the title) and the type of data it contains.  The data-win-option is shown in Listing 2.

data-win-options="{
 
    dataSource: {
 
        schema: {
 
            model: {
 
                fields: {
 
                    name: { type: 'string' },
 
                    city: { type: 'string' },
 
                    state: { type: 'string' },
 
                    country: { type: 'string' },
 
                    startDate: { type: 'date' },
 
                    endDate: { type: 'date' },
 
                    attendeeCount: { type: 'number' }
 
                }
 
            }
 
        }
 
    }
 
}"
 

Listing 2 – Specifying Data Types

NOTE: In my original post, I bound the table to the startDateFormatted and endDateFormatted properties.  I did this because I wanted the dates to be nicely formatted.  These properties are calculated properties in the Event class, and return a string, not a date, so even though I specified a date type, they will sort as strings. This isn’t an issue with the RadGrid, but how JavaScript date formatting works.  In order to sort correct (as we will see in the Sorting section below), these columns need to be bound to date values.

As we will see in the next section, the RadGrid enables formatting data when it is displayed.  This means that the static fields property of the Event class needs to be updated as well, as shown in Listing 3.

fields: [
 
        { field: 'name', title: 'Name' },
 
        { field: 'city', title: 'City' },
 
        { field: 'state', title: 'State', width: 90 },
 
        { field: 'country', title: 'Country', width: 110 },
 
        { field: 'startDate', title: 'Start Date', width: 125 },
 
        { field: 'endDate', title: 'End Date', width: 125 },
 
        { field: 'attendeeCount', title: 'Attendees', width: 125' },
 
    ]
 

Listing 3 – Updated fields property of the Event class

Formatting Columns

Now that the RadGrid knows what the data types are, formatting is as easy as adding a format property to a field in the fields collection.  Standard JavaScript formatting is used, so you can dress up the columns in a number of different display styles.  The updated fields are shown in Listing 4.

fields: [
 
        { field: 'name', title: 'Name' },
 
        { field: 'city', title: 'City' },
 
        { field: 'state', title: 'State', width: 90 },
 
        { field: 'country', title: 'Country', width: 110 },
 
        { field: 'startDate', title: 'Start Date', width: 125, format: '{0:MM/dd/yyyy}' },
 
        { field: 'endDate', title: 'End Date', width: 125, format: '{0:MM/dd/yyyy}' },
 
        { field: 'attendeeCount', title: 'Attendees', width: 125, format: '{0:N0}' },
 
    ]
 

Listing 4 – Adding Formatting

The Updated Grid

The update RadGrid is shown in Figure 3. 

Figure 3 – RadGrid with Formatted columns

The date and numeric columns are nicely formatted, but there still something not quite right about it.  Thanks largely to spreadsheet software like Excel, users expect to see text left justified and numbers right justified, and it would be nice to have fixed width fields (like dates and state abbreviations) centered.

Adding CSS Styles

Fortunately, this is again very easy.  By adding an “attributes” JSON object to the field definition, HTML attributes are added to the cells as they are rendered.  Likewise, using the “headerAttributes” property adds HTML attributes to the header cell in each row.

The attribute that we want to add to the cells and the cell headers is a style attribute that aligns the text appropriately.  The updated static fields property for the Event class is shown in Listing 5.

fields: [
 
        { field: 'name', title: 'Name', },
 
        { field: 'city', title: 'City', },
 
        {
 
            field: 'state', title: 'State', width: 90,
 
            attributes: {
 
                style: 'text-align:center',
 
            },
 
            headerAttributes: {
 
                style:'text-align:center',
 
            },
 
        },
 
        { field: 'country', title: 'Country', width: 110, },
 
        { field: 'startDate', title: 'Start Date', width: 125,
 
            format: '{0:MM/dd/yyyy}',
 
            attributes: {
 
                style: 'text-align:center',
 
            },
 
            headerAttributes: {
 
                style:'text-align:center',
 
            },
 
        },
 
        { field: 'endDate', title: 'End Date', width: 125,
 
            format: '{0:MM/dd/yyyy}',
 
            attributes: {
 
                style: 'text-align:center',
 
            },
 
            headerAttributes: {
 
                style: 'text-align:center',
 
            },
 
        },
 
        { field: 'attendeeCount', title: 'Attendees', width: 125,
 
            format: '{0:N0}',
 
            attributes: {
 
                style: 'text-align:right',
 
            },
 
            headerAttributes: {
 
                style:'text-align:right',
 
            },
 
        },
 
    ]
 

Listing 5 – Specifying Styles for Cells and Cell Headers

The results are shown in Figure 4.

Figure 4 – Adding Style to the columns

NOTE: This post has only touched on the formatting capabilities of the RadGrid.  The attributes and headerAttributes tag will allow a significant amount of customization of your grid columns holistically. A later post will discuss column templates, conditional formatting, and much more, like including Graphs in a grid cell!

Adding Sorting

Now that the grid is looking much better, it’s time to add some additional functionality for the user, like sorting.

DISCLAIMER: I am a developer at heart, and I really only understand three shapes and four colors.  To truly max out the look and feel of the Grid let a designer loose on it!

Adding Sorting

There are several options available for enabling users to sort data in the RadGrid, but they all really boil down to this: Single Column or Multiple Column sorting, and whether or not a column can be “unsorted”, or removed from the sorting euation. If a column can be removed from the sorting equation, three state sorting is enabled for the sortable columns.  Click once for ascending, then again for descending, and a third time to remove it from sorting.

Sorting is set as a data-win-option, and Table 1 lists the different options that can be set in the data-win-options.

Sort Option	Meaning
none	Sorting will be disabled. This is the default.
single	Single column sorting - the grid records can be ordered in ascending or descending order based only on a single column. This is done by clicking/tapping its header. On clicking/tapping another column's header, the first sorting is cleared and only the new one is applied.
multiple	Multi-column sorting - the grid records can be ordered in ascending or descending order based on one or more fields. This is done by clicking/tapping one column header until the desired order is achieved and then clicking/tapping another one to add another sort column.
single, allowUnsort	Same as single, with the difference that you can also unsort the sorted column by clicking/tapping its header.
multiple, allowUnsort	Same as multiple, but you can also unsort columns.

Table 1 – Sort Options

For Conference Buddy, I selected “multiple, allowUnsort” because I feel that gives the user the most flexibility.  The updated data-win-options is shown in Listing 6. As you can see from the listing, it is extremely easy to add sorting into the RadGrid. It’s literally one line of code!

data-win-options="{
 
    sortable: 'multiple, allowUnsort',
 
    dataSource: {
 
        schema: {
 
            model: {
 
                fields: {
 
                    name: { type: 'string' },
 
                    city: { type: 'string' },
 
                    state: { type: 'string' },
 
                    country: { type: 'string' },
 
                    startDate: { type: 'date' },
 
                    endDate: { type: 'date' },
 
                    attendeeCount: { type: 'number' }
 
                }
 
            }
 
        }
 
    }
 
}"
 

Listing 6 – Adding sorting

To show sorting in action, I’ve added some additional conferences to the Events data file.  Once the grid was loaded, I clicked on the Attendees column twice, and my descending sort glyph appeared, and my table was sorted by Attendees from highest to lowest.   Since I specified multiple columns, I then clicked on Start Date once, my ascending sort glyph appeared, and my table was sorted first by descending attendee count and then ascending date, as shown in Figure 5.

NOTE: When multiple columns are specified, the sort order is based on the order in which the user clicked, not on the order the columns appear in the grid. 

Figure 5 – Sorting by Attendees and then Start Date

Excluding Columns from Sorting

You can also prevent users for sorting on specific columns by adding “sortable:false” (without the quotes to the field definition.

Summary

There are many more options available, including filtering, grouping, selection, and much, much, more. While there is so much more power and flexibility available, in a few short steps we have transformed the original ListView into a compact, nicely formatted and sortable grid.

Download the code here.



Previous Post: Introducing the RadGrid for Windows 8 HTML