Added logic to fetch doc types icon for the editor preview for when live preview is disabled, at least the icon can provide context.

Author: mattbrailsford

Package/Doc_Type_Grid_Editor_0.1.zip

@@ -38,7 +38,7 @@ public string PropertyTypeAlias {
 
         public bool HasValue 
         {
-            get { return DataValue.ToString().Trim().Length > 0; }
+            get { return DataValue != null && DataValue.ToString().Trim().Length > 0; }
         }
 
         public object DataValue { get { return _rawValue; } }

Src/Our.Umbraco.DocTypeGridEditor/Models/DetachedPublishedProperty.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Text.RegularExpressions;
+using System.Web.Configuration;
 using Our.Umbraco.DocTypeGridEditor.Extensions;
 using Umbraco.Core.Models;
 using Umbraco.Core.PropertyEditors;
@@ -38,6 +39,17 @@ public IEnumerable<object> GetContentTypes([System.Web.Http.ModelBinding.ModelBi
                 });
         }
 
+        [System.Web.Http.HttpGet]
+        public object GetContentTypeIcon([System.Web.Http.ModelBinding.ModelBinder] Guid guid)
+        {
+            var contentTypeAlias = Services.ContentTypeService.GetAliasByGuid(guid);
+            var contentType = Services.ContentTypeService.GetContentType(contentTypeAlias);
+            return new
+            {
+                icon = contentType != null ? contentType.Icon : ""
+            };
+        }
+
         [System.Web.Http.HttpGet]
         public object GetDataTypePreValues(string dtdId)
         {

Src/Our.Umbraco.DocTypeGridEditor/Web/Controllers/DocTypeGridEditorApiController.cs

@@ -10,6 +10,7 @@
     function ($scope, $rootScope, $timeout, $routeParams, dtgeDialogService, dtgeResources) {
 
         $scope.title = "Click to insert item";
+        $scope.icon = "icon-item-arrangement";
 
         $scope.setValue = function (data) {
             $scope.control.value = data;
@@ -19,6 +20,13 @@
             if ("name" in $scope.control.value.value && $scope.control.value.value.name) {
                 $scope.title = $scope.control.value.value.name;
             }
+            if ("docType" in $scope.control.value && $scope.control.value.docType) {
+                dtgeResources.getContentTypeIcon($scope.control.value.docType).then(function (data2) {
+                    if (data2.icon) {
+                        $scope.icon = data2.icon;
+                    }
+                });
+            }
         };
 
         $scope.setDocType = function () {

Src/Our.Umbraco.DocTypeGridEditor/Web/UI/App_Plugins/DocTypeGridEditor/Js/doctypegrideditor.controllers.js

@@ -5,7 +5,7 @@
                 var url = "/umbraco/backoffice/DocTypeGridEditorApi/DocTypeGridEditorApi/GetContentTypeAliasByGuid?guid=" + guid;
                 return umbRequestHelper.resourcePromise(
                     $http.get(url),
-                    'Failed to retrieve datatype alias by guid'
+                    'Failed to retrieve content type alias by guid'
                 );
             },
             getContentTypes: function (allowedContentTypes) {
@@ -17,7 +17,14 @@
                 }
                 return umbRequestHelper.resourcePromise(
                     $http.get(url),
-                    'Failed to retrieve datatypes'
+                    'Failed to retrieve content types'
+                );
+            },
+            getContentTypeIcon: function (guid) {
+                var url = "/umbraco/backoffice/DocTypeGridEditorApi/DocTypeGridEditorApi/GetContentTypeIcon?guid=" + guid;
+                return umbRequestHelper.resourcePromise(
+                    $http.get(url),
+                    'Failed to retrieve content type icon'
                 );
             },
             getDataTypePreValues: function (dtdId) {

Src/Our.Umbraco.DocTypeGridEditor/Web/UI/App_Plugins/DocTypeGridEditor/Js/doctypegrideditor.resources.js

@@ -2,7 +2,7 @@
 
   <div class="usky-editor-placeholder" ng-click="setDocType()">
     <div ng-if="!preview">
-      <i class="icon icon-item-arrangement"></i>
+      <i class="icon {{icon}}"></i>
       <div class="help-text">{{title}}</div>
     </div>
     <div ng-if="preview">