Updated MvcGridDirective and GridTag that allows for cell templates.

GridTag.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Web.UI;
using HeroicCRM.Web.Utilities;
using HtmlTags;

namespace HeroicCRM.Web.Helpers
{
	public class GridTag : HtmlTag
	{
		public class ColumnBuilder<T>
		{
			private readonly GridTag _tag;

			public ColumnBuilder(GridTag tag)
			{
				_tag = tag;
			}

			public void Add<TProp>(Expression<Func<T, TProp>> property,
				string columnHeader = null,
				string cellFilter = null,
				string cellTemplate = null)
			{
				_tag._columns.Add(new ColumnDefinition
				{
					Field = property.ToCamelCaseName(),
					Name = columnHeader,
					CellFilter = cellFilter,
					CellTemplate = cellTemplate?.Replace("{", @"\{")
				});
			}
		}

		private class ColumnDefinition
		{
			public string Field { get; set; }

			public string Name { get; set; }

			public string CellFilter { get; set; }

			public string CellTemplate { get; set; }
		}

		private readonly List<ColumnDefinition> _columns = new List<ColumnDefinition>();

		public GridTag(string dataUrl)
			: base("mvc-grid")
		{
			Attr("grid-data-url", dataUrl);
		}

		public new GridTag Title(string title)
		{
			Attr("title", title);

			return this;
		}

		public GridTag Columns<T>(Action<ColumnBuilder<T>> configAction)
		{
			var builder = new ColumnBuilder<T>(this);
			configAction(builder);
			return this;
		}

		protected override void writeHtml(HtmlTextWriter html)
		{
			if (_columns.Any())
				this.Attr("columns", _columns.ToArray().ToJson(includeNull: false));

			base.writeHtml(html);
		}
	}
}

MvcGridDirective.js

(function () {

	window.app.directive('mvcGrid', mvcGrid);
	function mvcGrid() {
		return {
			scope: {
				gridDataUrl: '@',
				title: '@',
				columns: '@?'
			},
			template:
				'<div>' +
					'<h4><i class="fa fa-pie-chart fa-fw"></i> {{vm.title}}</h4>' +
					'<div>' +
						'<p ng-if="vm.loading">Loading...</p>' +
						'<div ng-if="!vm.loading" ui-grid="vm.gridOptions"></div>' +
					'</div>' +
				'</div>',
			link: function(scope, element, attrs) {
				console.log('Attrs:', attrs);
			},
			controllerAs: 'vm',
			controller: controller
		}
	}

	controller.$inject = ['$scope', '$http'];
	function controller($scope, $http) {
		var vm = this;

		vm.gridOptions = {
			enableHorizontalScrollbar: 0
		}

		vm.loading = true;

		vm.title = $scope.title;

		console.log('Columns: ', $scope.columns.replace(/\\\\{/g, '{'));

		if ($scope.columns)
			vm.gridOptions.columnDefs = angular.fromJson($scope.columns.replace(/\\\\{/g, '{'));

		console.log('Grid options:', vm.gridOptions);

		$http.post($scope.gridDataUrl)
			.success(function (data) {
				vm.gridOptions.data = data;
				vm.loading = false;
			});
	}

})();