Powerful Kentico Custom Table Visualization via Telerik Grid Control
Kentico custom tables provide a way for developers and content administrators to easily create and store data. Kentico’s MVC API has some great tools for retrieving that data to be used in your MVC site. The final ingredient needed is a great way to display and interact with this custom table data; that’s where the Telerik grid control comes into play.

Kentico Custom Table Setup

The first step in creating this full stack goodness is by creating the custom table in Kentico. For this example we’ll have a simple “Person” table, which will have the following fields:
  • First Name
  • Last Name
  • Email
  • Street Address
  • City
  • State
  • The sample data can be downloaded here: SQL FILE DOWNLOAD
Once the table has been created, navigate to the “Code” tab in the custom table, and copy the “Item code” into your MVC site. 



I like to put mine into a Models\CustomTableItems directory and namespace, but this is not mandatory. Make sure the file you create matches the class name of the table item you created. (Based on my table, my file name is PersonItem.cs) Once you’ve added this auto-generated code, make sure you swap out the namespace with where you have it saved in your project, update the using statements, and voila! You now have the ability to pull data from the Kentico Custom Table in a strongly typed object.

Getting Data from Kentico Custom Table

The next step involves getting the data from the custom table and into a friendly model for the front end.
I’ll start off with creating my friendly model. This step isn’t required but definitely recommended so that you’re not passing around your full PersonItem. The full PersonItem inherits from Kentico’s CustomTableItem and has tons of properties we don’t need. Here’s the Person model that I’ll be using:
 
public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public string StreetAddress { get; set; }
    public string City { get; set; }
    public string State { get; set; }
}


Next, we’ll be utilizing Kentico’s CustomTableItemProvider to gain access to our data. I created a method named “GetAllPeople” to retrieve all rows from the custom table, and convert those rows into Person objects. Below is a snippet showing this method.
 
public IEnumerable<Person> GetAllPeople()
{
    return CustomTableItemProvider.GetItems<PersonItem>()
        .Select(person => new Person
        {
            City = person.City,
            Email = person.Email,
            FirstName = person.FirstName,
            LastName = person.LastName,
            State = person.State,
            StreetAddress = person.StreetAddress
        });
}


As you can probably see, Kentico’s CustomTableItemProvider makes it extremely easy to retrieve the data you need with hardly any code. The generic “GetItems” method lets you specify a type, and behind the scenes, it looks at that class’s CLASS_NAME property, and figures out what custom table you’re trying to query against. Pretty neat!

Installing Telerik ASP.NET MVC

For this example, I will be using the Telerik ASP.NET MVC library. Since I don’t really want to reinvent the wheel, and the documentation already exists, you can follow the documentation at the link below if you need help with installing and setting up this library.  (https://docs.telerik.com/aspnet-mvc/getting-started/asp-net-mvc-5)

Creating Endpoint

The last step of backend code is to create an endpoint to retrieve the data from the custom table using the “GetAllPeople” method we created earlier. For simplicity's sake, I’m just going to add my “GetPeople” endpoint to the HomeController that was created as part of the spin-up of my MVC project. Here’s the full controller for your reference:
 
public class HomeController : Controller
{
    private readonly IPersonService personService;
    public HomeController(IPersonService personService)
    {
        this.personService = personService;
    }
    public ActionResult Index()
    {
        return View();
    }
    public ActionResult GetPeople([DataSourceRequest] DataSourceRequest request)
    {
        var people = personService.GetAllPeople();
        DataSourceResult result = people.ToDataSourceResult(request);
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

There are two endpoints in this controller. One to load the default view, and the new “GetPeople” endpoint that will communicate with the Telerik Grid Control we’ll be making in the final step. In this “GetPeople” method, we’re calling the “GetAllPeople” method we created earlier to get, well…, all the people from our custom table. After we make that call and have our data, we have some additional steps that package up our data so that it can be used by the Telerik Grid Control. If you’d like to read up on why this is needed, it can be found in the documentation here: https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

Using Telerik Grid Control

Now that we have a way to pull our data from the custom table via an endpoint, it’s time to build the view that displays this information. 

Since we’re using the Telerik ASP.NET MVC library, it’s super easy to build a powerful table in Razor views. Here’s the simple grid control for the Person objects we’ll be looking at:
 
<div>
    @(Html.Kendo().Grid<Person>()
        .Name("personGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.FirstName);
            columns.Bound(c => c.LastName);
            columns.Bound(c => c.Email);
            columns.Bound(c => c.StreetAddress);
            columns.Bound(c => c.City);
            columns.Bound(c => c.State);
        })
        .HtmlAttributes(new { style = "height: 550px; margin-top: 50px;" })
        .Filterable()
        .ColumnMenu()
        .Scrollable()
        .Groupable()
        .Sortable()
        .Reorderable(r => r.Columns(true))
        .Resizable(r => r.Columns(true))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("GetPeople", "Home"))
            .ServerOperation(false)
        )
    )
</div>


That’s it! That small bit of code gives us one powerful grid control. This grid control allows us to sort by column, filter by column, reorder and resize columns, show/hide columns, and group by column. I don’t even want to think about how long it would take to write something similar to this in javascript from scratch!
Here are a few screenshots of the grid for your viewing pleasure.

How the grid looks on page load



When grouping by State

When grouping by State

All the different ways you can filter by column

All the different ways you can filter by column

 

Share This Post:

Twitter Pinterest Facebook Google+
Click here to read more Kentico posts
Start a Project with Us

About the author

Ben has always loved technology and computers but was a bit of a late bloomer when it comes to coding. He wrote his first line of code during his freshman year of college, afterward, he became completely hooked. After just one semester, Ben was working as a programming tutor for his college and doing tons of web development projects. When Ben isn’t working on a side project you’ll find him spending time with his wife and their dog, or playing video games with friends.

View other posts by Ben

Subscribe to Updates

Stay up to date on what BizStream is doing and keep in the loop on the latest with Kentico.