The Telerik MVC grid that comes with Telerik’s MVC open source framework is awesome.  It really rocks; it has a lot of the features that exists within the ASP.NET AJAX framework are also in this grid implementation.  Not only that, it implements MVC syntaxes for constructing the UI.  Because the grid uses Action classes to render contents to the response stream, these features are available in C# only (at least fully).  Below is the Telerik grid, which we’ll dissect in pieces.  Note that this one continuous running statement, but I’m going to break it up into sections without restating the beginning statements.

The entire API uses a fluent approach and begins with the following structure:

<% Html.Telerik().Grid(<data source>).Name(“Required”).Pageable(..).Sortable(..).Columns(..).Render(); %>

The approach chains methods together and supplies the parameters to the chained object, until the point of rendering occurs (note the use of the semi-colon; rendering occurs inline by performing Response.Write calls, though <%= syntax is also supported).  The typical starting point is to define columns using the Columns action method; taking a reference to a variable (a factory that constructs the grid’s columns), the builder appends columns to the grid.  Note the use of the action approach here; this is the common theme throughout.  The action method also permits using <% %> to define HTML markup inline, which is very effective and useful.  Take a look at the exampel below.

<%
Html.Telerik().Grid(Model).Name(“Test2”)
 .Columns((builder) =>
 {
     builder.Add((i) =>
    {
      %>

        <%= Html.ActionLink(“Edit”, “Editing”, new { key = i.Key }, new { @class = “t-link action-edit” })%>

    <%
  });
  builder.Add(i => i.Key).Visible(false);
  builder.Add(i => i.Name).Encoded(true).Title(“Product”);
  builder.Add((c) =>
   {
        %>
              Z<%= c.Sku%>
        <%
   }).Title(“SKU”);
 })

Each column is chainable in nature too, and each column object returned allows you to specify the individual contents, some attributes about the column (title, visibility, whether the content is encoded, etc.), and more information.  The next host of methods adds the additional features to the Grid.  For instance, each major feature the grid supports has a separate action method, as shown below.

 .Pageable()
 .Scrollable((scroll) =>
 {
     scroll.Enabled(true).Height(200);
 })
 .Filterable()
 .Sortable((sort) =>
 {
      sort.Enabled(true).SortMode(GridSortMode.SingleColumn);
 })

Each method takes an action response, allowing you to fine-tune the individual settings.  I’m using the pretty basic settings here; for instance, for Pageable and Filterable settings, simply by calling the empty version of the method enables the grid to use these features with default settings.  Scrolling is enabled at a high of 200 pixel scrolling area using the action method, and sort features use an action method that allow sorting of single or multiple columns.

Other features are available too; for instance, the grid supports AJAX and can be enabled in the same approach (requiring an action to add additional details), and a slew of other feature’s I’ll talk about later.  The final solution gets rendered to the browser at the end by calling Render, which uses the HtmlTextWriter to write the response to the browser.  This all happens internally without you needing to do anything about it.

 .Render();

 The Telerik Grid is a very nice grid, it’s free, and it’s easy to use in MVC applications.  Check it out if you get a chance.  I’ll blog more about it in later articles.  Alternatively, I’ve written an article fully documenting the features, which is available in DevConnections magazine in March, that talks not only about the grid, but about some of the other controls, as a part 1.  A part 2 will come out later detailing the other controls of the framework.  It should be a good starting point for any developer, so check it out.