We've been working with KendoUI Grids, often via the Telerik MVC extensions for years. They provide a great way to quickly build out a CRUD interface for the Admin part of a web application. They are also useful for client facing reports, filtered data views etc. In fact, their very flexibility is also their downside. There are a lot of options to configure and the configuration is normally done in the View - not a place that you want a lot of repeated code.
Similarly, each Kendo Grid needs some way of persisting the data. We tend to use the MVC Ajax bindings. This means, once again, that each grid needs a controller to manage the Create Read Update and Delete operations - more repeated code, more cutting and pasting. These are all bad code smells.
Each time we tackle a new project I look to reduce the repeated code used in the admin interface. Each time I do it slightly better* than the last. This time, I think I've got a way that is so simple and neat that its worth sharing.
(* this is a lie, some of the attempts have been awful and deserve to die. But at least they helped get here.)
So what does this attempt do? Well it combines a base controller class which uses generics to perform the necessary CRUD operations using Entity Framework Core, and a configuration builder which makes a pre-defined grid for the view. The combination of the two means at its simplest you just need an empty controller for your type (inheriting from the base class) and a view which class the builder and just needs you to list the columns. Short and sweet. And no copy-pasting complex code.
The Kendo Base Controller
The above controller handles all the CRUD operations for the grids. There's quite a lot there - some of which I'll cover in another post. Today, lets just get the basics covered.
The basics are really basic. You inherit from this to make the simplest possible controller for a Grid. It supplies a page for the grid itself to live in with a ViewBag set to hold Title, Id and ControllerName and the Crud operations based on a generic type using EF Core- although I think this will work with other Code First EF.
So how do you instantiate your controller?
Instantiating a controller
Here's where the work begins to pay off. The code above is all you need for a CRUD controller ready to work with your grid.
There is a way to do custom pre-filtering of the grid (show the invoices for a customer for instance) and a way to hook up change notifications, but we'll ignore those for now. The above is all you need for a simple grid.
If you need foreign keys, you need to do a little more work...
A controller for a grid with Foreign Keys
To make foreign keys work in the grid (we'll get to the grid views in a minute) you need to supply the values for those keys. To do that, you can override the Index method and generate them there. You also need to set the Title, Id and ControllerName on the ViewBag in the same way the virtual method does.
Creating The View
This is our rather simple view. The trick here is to move all of the regular config that gets repeated in every page into a StandardGrid<T> class. Whats left is the definition of the model and the columns you want to show - the stuff thats different in every view.
So finally lets take a look at the StandardGrid<T> class
StandardGrid<T>
The above class does all the config work. The AJAX part is pretty much as it needs to be to work with our KendoBaseController, but the rest of it is up to you - update the configuration to make the grids work the way you want.
