How to get started with Telerik's Data Grid

Learn how Telerik's Kendo UI DataGrid can make working with data in your WiseJ.NET web applications much easier.

by Jon Hilton

If you're building web applications, you're going to spend a lot of your time figuring out how to present data on screen.

Simple tables will get you so far, but it's often only a matter of time until you'll be asked to implement paging, sorting, aggregate columns and more besides.

While you can go ahead and build that sort of functionality yourself, a much quicker option is available, in the form of pre-built datagrids from established component vendors.

Last time out we explored how to start using Telerik's Kendo UI with Wisej.NET.

Now let's take that a step further and see how Kendo UI's DataGrid and Wisej.NET make it possible for your users to view and interact with your data.

Data Grid Basics

Kendo UI's DataGrid makes it quick and simple to present tabular data.

You'll need a data source - one option is to use the dataSource parameter and provide your grid with an IEnumerable<T>.

These steps assuming we've got a Wisej.NET UserControl or Page, have added an instance of the kendoGrid and renamed it to gridSales.

Let's start with a method to fetch some random sales data (for demo purposes):

KendoDataGridFundamentals.cs

public partial class KendoDataGridFundamentals : Wisej.Web.UserControl
{

    ...

    private IEnumerable<Sale> sales = 
        Enumerable.Range(1, 100).Select(x => new Sale
    {
        Placed = DateTime.Now.AddDays(x),
        CustomerName = "Customer " + x,
        Id = x,
        Value = x * 20
    });
    
    private class Sale
    {
        public int Id { get; set; }
        public DateTime Placed { get; set; }
        public string CustomerName { get; set; }
        public decimal Value { get; set; }
    }
    
}

We can wire the grid up to this data using the dataSource property:

private void KendoDataGridFundamentals_Load(object sender, EventArgs e)
{
    this.gridSales.Options.dataSource = sales;
}

With that the DataGrid component springs into life and shows sales data.

Make it sortable

We can set any of the grid's configuration options via the dynamic Options property.

Here's how we can make the grid sortable:

private void KendoDataGridFundamentals_Load(object sender, EventArgs e)
{
    this.gridSales.Options.dataSource = sales;
    this.gridSales.Options.sortable = true;
}

With this the column headings becomes clickable - multiple clicks toggle between sorting ascending, descending, or not at all.

Enable Paging

We could end up with a large amount of sales to show in the grid and one common way to make large amounts of data more accessible is to use paging.

private void KendoDataGridFundamentals_Load(object sender, EventArgs e)
{
    ...
    this.gridSales.Options.pageable = new { pageSize = 25 };
}

With a pageSize configured the grid will now show that number of items per page and render UI for navigating between pages.

Group the data

Moving beyond the basics, the Kendo grid can tackle some more advanced scenarios too.

For example, you may wish to group your data based on specific fields.

Let's extend our dummy sales data to include a Product.

private IEnumerable<Sale> sales = 
    Enumerable.Range(1, 100).Select(x => new Sale
{
    Placed = DateTime.Now.AddDays(x),
    CustomerName = "Customer " + x,
    Id = x,
    Value = x * 20,
    Product = x < 50 ? "iPhone" : "Android Phone" // split sales between two products
});

private class Sale
{
    public int Id { get; set; }
    public DateTime Placed { get; set; }
    public string CustomerName { get; set; }
    public decimal Value { get; set; }
    public string Product { get; set; }
}

Now half of the sales will be for iPhone, the other for Android.

Again we can use the trusty dynamic Options property, this time to set the grid's groupable property.

private void KendoDataGridFundamentals_Load(object sender, EventArgs e)
{
    this.gridSales.Options.dataSource = sales;
    this.gridSales.Options.sortable = true;            
    this.gridSales.Options.groupable = true;
}

Things can get a touch confusing if we enable paging and grouping so I've removed the paging for now.

With this we can drag any field up to the top of the grid to group by it.

Format the grid's fields

One thing we've ignored until now is the slightly verbose way the grid is displaying our dates for when the sales orders were places.

We can change this if we take direct control over which columns we show, and how we show them.

private void KendoDataGridFundamentals_Load(object sender, EventArgs e)
{
    ...

    this.gridSales.Options.columns = new[] {
        new {
            field = "Placed",
            title = "Placed",
            format = "{0:yyyy-MM-dd}"
        }
    };
}

One thing to watch out for - the grid will now only show the columns specified (where before it automatically showed all of them).

In this case we probably still want our other columns, so we'll need to explicitly include them too:

private void KendoDataGridFundamentals_Load(object sender, EventArgs e)
{
    ...

    this.gridSales.Options.columns = new[] {
        new {
            field = "CustomerName",
            format = ""
        },
        new {
            field = "Placed",
            format = "{0:yyyy-MM-dd}"
        },
        new {
            field = "Value",
            format = ""
        },
        new {
            field = "Product",
            format = ""
        }               
    };
}

Leaving the values for format blank for the other fields here means they'll retain their default format.

More ways to configure the control

So far we've used anonymous objects in our C# code to set options for the grid.

In practice this can become a little unwieldy.

Take another look at the code for formatting the Placed column:

this.gridSales.Options.columns = new[] {
    new {
        field = "CustomerName",
        format = ""
    },
    new {
        field = "Placed",
        format = "{0:yyyy-MM-dd}"
    },
    new {
        field = "Value",
        format = ""
    },
    new {
        field = "Product",
        format = ""
    }               
};

To keep the compiler happy we've had to declare the format property for every column, even though we're leaving them as empty strings because. Otherwise we'd get an error:

No best type found for implicitly typed array

But all that boilerplate, just so we can tweak the format for one column, seems unnecessary.

To avoid it we can use one of two alternative methods for configuring the grid.

Create a type

One option is to create a class to represent column configuration.

namespace WiseJTutorials.Panels.KendoGridModels
{
    public class Column
    {
        public string field { get; set; }
        public string format { get; set; }
        public bool? groupable { get; set; }        
    }
}

Now we can use that in place of the anonymous types we were using before.

this.gridSales.Options.columns = new Column[] {
    new Column{
        field = "CustomerName"                    
    },
    new Column{
        field = "Placed",
        format = "{0:yyyy-MM-dd}"
    },
    new Column{
        field = "Value"                   
    },
    new Column{
        field = "Product"                    
    }
};

Specify options in the designer

The other option is to head to the designer for the page and directly paste JSON as the value for the Options property.

This is handy if you want to take examples directly from the Kendo API docs. For the most part you can just paste them in here and it should work.

It also has the advantage of making the configuration visible in the designer. In this case the designer now shows the columns for the grid in the WYSIWYG editor.

Filter the data

One last handy feature of the Kendo grid is its built-in ability to filter data.

If you set the filter mode to row the column header will transform into a row of textboxes where users can enter values to filter the data.

this.gridSales.Options.filterable = new { mode = "row" };

Alternatively you can set filterable to true (without setting a mode) to get a filter icon for each column.

this.gridSales.Options.filterable = true;

Clicking this icon reveals more options for filtering the results.

For some columns you might want to let your users select (by clicking a checkbox) which of the available values they want to filter by.

You can enable this on a column by column basis.

In JSON the configuration looks like this:

columns: [
    { field: "Product", filterable: { multi: true }},
    { field: "Value" }
]

If you've created a strongly typed object to represent columns you can tweak it to include a filterable property.

namespace WiseJTutorials.Panels.KendoGridModels
{
    public class Column
    {
        public string field { get; set; }
        public string format { get; set; }
        public bool? groupable { get; set; }
        public Filterable filterable { get; set; }

    }

    public class Filterable
    {
        public bool multi { get; set; }
    }
}

Then configure which columns you want to be presented using checkboxes.

this.gridSales.Options.columns = new Column[] {
    ...
    new Column{
        field = "Product",
        filterable = new Filterable{ multi = true }
    }
};

Wich results in a handy checkbox list for that column when you view this in the browser.

In Summary

Kendo Grid is a tried and tested component for presenting and interacting with data.

Wisej.NET's premium extension for Telerik's Kendo UI makes it possible to use the grid in your Wisej.NET applications.

You can use the dynamic Optionsproperty to enable the grid's built-in features such as paging, sorting and grouping.

Configuration via anonymous objects is useful to get started, but strongly-typed objects can cut down on boilerplate and make ongoing development easier.

You can also define the grid's options using JSON if you assign it to the Options property and the easiest way to do this is via the WYSIWYG designer.