# How to get started with Telerik's Data Grid

*by* [*Jon Hilton*](https://www.learnwisej.net/authors/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**

```csharp
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: &#x20;

```csharp
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.

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2F1NPljoaRhEHPATbUusqC%2Fimage.png?alt=media&#x26;token=66c46b2e-eadb-4da2-8f30-1722d64a9eb4" alt=""><figcaption></figcaption></figure>

### 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:

```csharp
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.

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2FhlkEAigpla4pZZknGGPa%2Fimage.png?alt=media&#x26;token=d24fbc46-3462-4c67-9a28-9f9e373cffb3" alt=""><figcaption></figcaption></figure>

### 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.

```csharp
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.

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2FSrd0XFUjs37bFrfcUoER%2Fimage.png?alt=media&#x26;token=865ae6fc-a31c-4c5c-90a6-701f50948d81" alt=""><figcaption></figcaption></figure>

### 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`.

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

private class Sale
{
    public int Id { get; set; }
    public DateTime Placed { get; set; }
    public string CustomerName { get; set; }
    public decimal Value { get; set; }
<strong>    public string Product { get; set; }
</strong>}
</code></pre>

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.

```csharp
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.

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2FjBGekuLh1qJ9zULVzQzB%2Fimage.png?alt=media&#x26;token=35f86ff9-be1f-4522-b7f5-14d9f9fa09c4" alt=""><figcaption></figcaption></figure>

### 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.

```csharp
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).

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2FMTrlTVIkDrf500PwdyqY%2Fimage.png?alt=media&#x26;token=e548010c-6fcb-4000-aa90-c0f546639974" alt=""><figcaption></figcaption></figure>

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

```csharp
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.

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2FIJnz8TaDH4NSKWM5SkK1%2Fimage.png?alt=media&#x26;token=71b9c61a-eedd-48f1-a745-83f47f443baa" alt=""><figcaption></figcaption></figure>

### 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:

```csharp
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:

{% hint style="danger" %}
No best type found for implicitly typed array
{% endhint %}

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.

```csharp
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.

```csharp
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.

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2Fn1U5UOseGPvzqFsI3Rr3%2Fimage.png?alt=media&#x26;token=41114b61-7589-486d-a3f9-19d9bea17470" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2FgdDLgZ5vm5VkKMGuMSBT%2Fimage.png?alt=media&#x26;token=66bda4fe-d2d7-4f63-9d4e-803630dd6c10" alt=""><figcaption></figcaption></figure>

### 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.

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

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2FY2n5hJYPNCtGH03N8P2N%2Fimage.png?alt=media&#x26;token=7ad7f7f1-acf7-450b-ad52-4ae587946f0f" alt=""><figcaption></figcaption></figure>

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

```csharp
this.gridSales.Options.filterable = true;
```

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2FaVJXgHaDfW7goW2MmBdH%2Fimage.png?alt=media&#x26;token=57257de7-c284-4507-9792-a13fe40e41cb" alt=""><figcaption></figcaption></figure>

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:

```json
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.

```csharp
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.

```csharp
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.

<figure><img src="https://3188166459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZg1RIEjJ5H42ECDnFfU%2Fuploads%2FwHimvOe7QI1oWoUqV9oS%2Fimage.png?alt=media&#x26;token=7793f67b-9d0c-422d-b7ce-2441e339c686" alt=""><figcaption></figcaption></figure>

### 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 `Options`property 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.