This is second in the series posts I am doing to cover Telerik Extensions for ASP.NET MVC.
- Getting Started with Telerik Extensions for ASP.NET MVC
In today's post I will talk about using Telerik Extensions for ASP.NET - The Grid.
I will start with a ASP.NET MVC2 application which is already configured to run Telerik Extensions, if you have not already done that, I encourage you to read my first post on getting started(link above).
Add a Controller and create a method to return IQueryable<YourObject>. For sample code you can use something like this -
| public class AccessLevelController : Controller |
| { |
| private readonly AccessLevelRepository repository = new AccessLevelRepository(); |
| |
| public ActionResult Index() |
| { |
| IQueryable<AccessLevel> accessLevelList = repository.GetAll().AsQueryable(); |
| return View(accessLevelList); |
| } |
| } |
Although it is not mandatory to return a IQueryable<>, Telerik's Grid's Linq Engine will take advantage of IQueryable<> to do sorting, filtering, grouping etc, the engine will fire the queries with the exact filter, sort clauses rather than bringing all the data and trying to filter,sort afterwards. This is a huge performance gain in most of the scenarios.
Now add a View for the Action Method Index, Strongly type the View to AccessLevel (object I am getting the data for) and leave the view content Empty(we will define our List content using Telerik Grid rather than using the default ASP.NET MVC's List Content)
Once you add the View change the Model of the view to be IQueryable<AccessLevel> which is what we returned from the Action Method.
This is how your View should like after changing the Model
| <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IQueryable<DomainModel.Database.AccessLevel>>" %> |
| |
| <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> |
| Index |
| </asp:Content> |
| |
| <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> |
| |
| <h2>Access Level List</h2> |
| |
| </asp:Content> |
Now, let us add the Telerik Grid.
Use the below snippet to add Grid -
| <% Html.Telerik().Grid(Model) |
| .Name("AccessLevelList") |
| .Columns(c => |
| { |
| c.Bound(o=>o.Access_Level_Id).Title("Access Level Id"); |
| c.Bound(o => o.Access_Level_Role).Title("Role Name"); |
| }) |
| .PrefixUrlParameters(false) |
| .Sortable() |
| .Pageable() |
| .Filterable() |
| .Groupable() |
| .Render(); |
| %> |
To test that we did everything correctly let us run the application and see if we see Telerik's Grid.(I will go over each property below).
If you see a grid which looks like the above image, Great! we are done configuring the Grid.
Now let us go over what each property in the above HTML means -
DataBinding using (Grid(Model))
There are few ways to bind the data to grid, the most easiest and convenient way being to pass theModel to the grid directly. This model refers to IQueryable<AccessLevel> which we made the Model of the View. Other ways to bind data are passing data using ViewData collection.
Name
The property "Name" is the actual clean HTML id of the div which wraps the table(grid translates to HTML table) that will be used for this list of data. After you run the application do a View Source from your browser, you will see a div with the Id you mentioned in this Name property.
Columns
Columns property defines the columns that will be on the grid, it allows the Lambda Syntax to define properties to each column. In the example we are making use of "Title" property for each column to define what the header text of the column will be.
PrefixUrlParameters
The PrefixUrlParameters property will tell the Grid whether to prefix the grid name in URL while doing operations like Sorting and Filtering. For example if you run the application with PrefixUrlParameters(true) and sort on Role Name column this is how the URL would change to -
.png?sfvrsn=0)
See how AccessLevelList is added to the URL. This is useful if we have multiple Grid's on the same page, since for the sake of this demo I am using only one grid on the page, I will set PrefixUrlParameters(false) and sort on Role Name column to see how the URL would change to -
See how AccesLevelList is no longer added in the URL.
Sortable
Sortable property makes the grid Sortable, however this property can be turned off on a column by column basis using the Columns property for example if you wish to turn off sorting for AccessLevelId this is how you would do it.
| .Columns(c => |
| { |
| c.Bound(o=>o.Access_Level_Id).Title("Access Level Id").Sortable(false); |
| c.Bound(o => o.Access_Level_Role).Title("Role Name"); |
| }) |
Pageable
Pageable property allowing paging for the grid.
Filterable
Filterable property allows filtering in the grid, however this property can be turned off on a column by column basis using the Columns property for example if you wish to turn off filtering for AccessLevelId this is how you would do it.
| .Columns(c => |
| { |
| c.Bound(o=>o.Access_Level_Id).Title("Access Level Id").Filterable(false); |
| c.Bound(o => o.Access_Level_Role).Title("Role Name"); |
| }) |
Groupable
Groupable property allows grouping of columns in the grid, however this property can be turned off on a column by column basis using the Columns property for example if you wish to turn off Grouping for AccessLevelId this is how you would do it.
| .Columns(c => |
| { |
| c.Bound(o=>o.Access_Level_Id).Title("Access Level Id").Groupable(false); |
| c.Bound(o => o.Access_Level_Role).Title("Role Name"); |
| }) |
Render
This property should be called to render any Telerik Extensions control.
That's it for this post, in the next post I will be talking about how to use the Editor control.
Hope you found this useful.
Cheers,
Venkata