#4398 - Added validation to the grid editor, such that columns must be at least as large as the layouts.

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypesettings/datatypesettings.controller.js

@@ -10,7 +10,7 @@
 (function () {
     "use strict";
 
-    function DataTypeSettingsController($scope, dataTypeResource, dataTypeHelper, localizationService) {
+    function DataTypeSettingsController($scope, dataTypeResource, dataTypeHelper, localizationService, notificationsService, overlayService, formHelper) {
 
         var vm = this;
 
@@ -102,7 +102,7 @@
             vm.saveButtonState = "busy";
 
             var preValues = dataTypeHelper.createPreValueProps(vm.dataType.preValues);
-
+            
             dataTypeResource.save(vm.dataType, preValues, $scope.model.create).then(function(newDataType) {
                 $scope.model.dataType = newDataType;
                 vm.saveButtonState = "success";
@@ -110,6 +110,19 @@
                 if ($scope.model && $scope.model.submit) {
                     $scope.model.submit($scope.model);
                 }
+            }, function(err) {
+                vm.saveButtonState = "error";
+     
+                 if(err.status === 400) {
+                    if (err.data && (err.data.ModelState)) {
+                        
+                        formHelper.handleServerValidation(err.data.ModelState);
+
+                        for (var e in err.data.ModelState) {
+                            notificationsService.error("Validation", err.data.ModelState[e][0]);
+                        }
+                    }
+                }
             });
             
         }
@@ -120,4 +133,4 @@
 
     angular.module("umbraco").controller("Umbraco.Editors.DataTypeSettingsController", DataTypeSettingsController);
 
-})();
+})();

src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js

@@ -96,7 +96,7 @@ angular.module("umbraco")
            $scope.layoutConfigOverlay.rows = $scope.model.value.layouts;
            $scope.layoutConfigOverlay.columns = $scope.model.value.columns;
            $scope.layoutConfigOverlay.show = true;
-
+           
            $scope.layoutConfigOverlay.submit = function(model) {
               $scope.layoutConfigOverlay.show = false;
               $scope.layoutConfigOverlay = null;
@@ -218,8 +218,8 @@ angular.module("umbraco")
            $scope.editConfigCollectionOverlay.show = true;
 
            $scope.editConfigCollectionOverlay.submit = function(model) {
-
-              callback(model.config)
+               
+              callback(model.config);
 
               $scope.editConfigCollectionOverlay.show = false;
               $scope.editConfigCollectionOverlay = null;

src/Umbraco.Web/PropertyEditors/GridConfigurationEditor.cs

@@ -1,4 +1,9 @@
-using Umbraco.Core.PropertyEditors;
+using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
+using Newtonsoft.Json;
+using Umbraco.Core.PropertyEditors;
+using Umbraco.Core.PropertyEditors.Validators;
 
 namespace Umbraco.Web.PropertyEditors
 {
@@ -6,5 +11,45 @@ namespace Umbraco.Web.PropertyEditors
     /// Represents the configuration for the grid value editor.
     /// </summary>
     public class GridConfigurationEditor : ConfigurationEditor<GridConfiguration>
-    { }
+    {
+        public GridConfigurationEditor()
+        {
+            var items = Fields.First(x => x.Key == "items");
+
+            items.Validators.Add(new GridValidator());
+        }
+    }
+
+    public class GridValidator : IValueValidator
+    {
+        public IEnumerable<ValidationResult> Validate(object rawValue, string valueType, object dataTypeConfiguration)
+        {
+            if (rawValue == null)
+                yield break;
+
+            var model = JsonConvert.DeserializeObject<GridEditorModel>(rawValue.ToString());
+
+            if (model.Templates.Any(t => t.Sections.Sum(s => s.Grid) > model.Columns))
+            {
+                yield return new ValidationResult("Columns must be at least the same size as the largest layout", new[] { nameof(model.Columns) });
+            }
+
+        }
+    }
+
+    public class GridEditorModel
+    {
+        public GridEditorTemplateModel[] Templates { get; set; }
+        public int Columns { get; set; }
+    }
+
+    public class GridEditorTemplateModel
+    {
+        public GridEditorSectionModel[] Sections { get; set; }
+    }
+
+    public class GridEditorSectionModel
+    {
+        public int Grid { get; set; }
+    }
 }