Kendo Grid MVC Wrapper Automatic Column Configuration

Originally posted on http://geekswithblogs.net/sdorman/archive/2015/11/05/kendo-grid-mvc-wrapper-automatic-column-configuration.aspx.

The Telerik Kendo Grid control is really powerful, especially when combined with the MVC wrappers. One of the things that make the MVC wrapper so useful is the ability to automatically (and easily) generate data-bound columns. It’s a single line of code:

.Columns(columns => columns.AutoGenerate(true))

The code behind AutoGenerate(true) understands some of the <a href="https://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations(v=vs.110).aspx">System.ComponentModel.DataAnnotations</a> attributes. Specifically, it knows how to automatically configure the grid column for these attributes:

What’s nice about this support is that you can use these attributes to adorn your model properties and declaratively describe some of the metadata about the column.

The problem, though, is that you can’t also set the Kendo Grid specific properties, such as column width, if the column is locked or not, and if it should be included in the column menu (to name just a few).

Fortunately, we can hook into the <a href="https://msdn.microsoft.com/en-us/library/system.web.mvc.modelmetadata.additionalvalues(v=vs.118).aspx#P:System.Web.Mvc.ModelMetadata.AdditionalValues">AdditionalValues</a> dictionary of the Metadata property on a data-bound column (which is of type Kendo.Mvc.UI.GridBoundColumn<TModel, TValue>). This property holds an instance of a <a href="https://msdn.microsoft.com/en-us/library/system.web.mvc.modelmetadata(v=vs.110).aspx">System.Web.Mvc.ModelMetadata</a> (more specifically an instance of a <a href="https://msdn.microsoft.com/en-us/library/gg512055(v=vs.118).aspx">CachedModelMetadata<TPrototypeCache></a>) object, which has all of the metadata related attributes defined on the properties of the model and is the key to our solution of providing automatic column configuration based on data annotation attributes. To do this, we simply define our own attribute and implement the <a href="https://msdn.microsoft.com/en-us/library/system.web.mvc.imetadataaware(v=vs.118).aspx">IMetadataAware</a> interface. The runtime will handle everything for us and our new attribute will be added to the AdditionalValues dictionary.

I created a GridColumnAttribute to allow all of the additional Kendo specific properties to be set.

using System;
using System.Web.Mvc;

namespace Cadru.Web.KendoExtensions
{
    public class GridColumnAttribute : Attribute, IMetadataAware
    {
        public const string Key = "GridColumnMetadata";

        public bool Hidden { get; set; }

        public bool IncludeInMenu { get; set; }

        public bool Lockable { get; set; }

        public bool Locked { get; set; }

        public int MinScreenWidth { get; set; }

        public string Width { get; set; }

        public void OnMetadataCreated(ModelMetadata metadata)
        {
            metadata.AdditionalValues[GridColumnAttribute.Key] = this;
        }
    }
}

Now, we can decorate our model with the new attribute:

public class EmployeeModel
{
    [Editable(false)]
    [GridColumn(Width = "100px", Locked = true)]
    public string EmployeeID { get; set; }

    [GridColumn(Width = "200px", Locked = true)]
    public string EmployeeName { get; set; }

    [GridColumn(Width = "100px")]
    public string EmployeeFirstName { get; set; }

    [GridColumn(Width = "100px")]
    public string EmployeeLastName { get; set; }
}

However, that’s only part of the solution. We still need to tell the Kendo Grid that it needs to do something with this new attribute. To do this, we can use the overload for the AutoGenerate method which takes an Action:

.Columns(columns => columns.AutoGenerate(c => GridColumnHelpers.ConfigureColumn(c)))

The ConfigureColumns method looks like:

using Kendo.Mvc.UI;
using System;
using System.Web.Mvc;

namespace Cadru.Web.KendoExtensions
{
    public static class GridColumnHelpers
    {
        public static void ConfigureColumn<T>(GridColumnBase<T> column) where T : class
        {
            CachedDataAnnotationsModelMetadata metadata = ((dynamic)column).Metadata;
            object attributeValue = null;
            if (metadata.AdditionalValues.TryGetValue(GridColumnAttribute.Key, out attributeValue))
            {
                var attribute = (GridColumnAttribute)attributeValue;
                column.Width = attribute.Width;
                column.Locked = attribute.Locked;
                column.Hidden = attribute.Hidden;
                column.IncludeInMenu = attribute.IncludeInMenu;
                column.Lockable = attribute.Lockable;
                column.MinScreenWidth = attribute.MinScreenWidth;
            }
        }
    }
}

This takes advantage of the fact that the method is being called in the context of automatically generating data-bound columns, so it’s able to take the column and cast it to a dynamic object in order to reference the Metadata property. We have to do this because the IGridBoundColumn doesn’t expose the Metadata property and we can’t cast it directly to a GridBoundColumn<TModel, TValue> because (among other reasons) we don’t know the type for TValue. That leaves us with casting it to dynamic and letting the dynamic dispatcher figure out how to give us back the requested property. From there, we look to see if the AdditionalValues dictionary contains our attribute, and if it does we then set the column properties to their respective values as specified by the attribute. We now have the ability to automatically configure the additional column properties using metadata specified in our model while still automatically generating the data-bound columns.