Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Michael Nielsen 99 posts 619 karma points
    May 12, 2016 @ 18:29
    Michael Nielsen
    0

    Grid Styles Editor not saving value

    I'm having some trouble with a custom grid settings editor.

    I've created a Grid with these styles settings enter image description here

    This is the manifest

    {
    propertyEditors:[
    {
        name: "ApprovedColorPicker",
        alias: "approvedcolorpicker.editor",
        isGridEditor: true,
        editor:{
            view: "~/app_plugins/approvedcolorpicker/approvedcolorpicker.html",
            valueType: "JSON"
        }   
    }
    ],
    javascript: [
        "~/app_plugins/approvedcolorpicker/approvedcolorpicker.controller.js"
    ]}
    

    This is the controller

    angular.module("umbraco").controller("ApprovedColorPicker", function($scope,$log){
    console.log($scope.model)
    
    $scope.choose = function(color){
        $scope.model.value = color.codevalue;
        console.log($scope.model)
    };
    
    
    
    $scope.colors = [
    {
    name: "d1e9fb",
    codevalue: "#d1e9fb"
    },
    /* I've shortened the list */
    {
    name: "ffffff",
    codevalue: "#ffffff"
    } ]; });
    

    This is the view

    <style type="text/css">
    .color a {display:block; width:60px; height:48px; font-size:36px; padding-top:12px; text-align:center;border:1px solid #ededed;border-radius:4px;}
    .color a:hover {text-decoration:none; background:#333; color:#fff;}
    .selected {background: #ddd;border-radius:4px;}
    .selected a {color:#fff;}
    </style>
    <div ng-controller="ApprovedColorPicker">
        <div id="all-colors" class="row" style="margin-top:15px;">
          <div class="color" ng-repeat="color in colors" ng-model="model.value" ng-class="{selected: color.codevalue === model.value}" style="float:left; margin-right:10px;">
            <div class="color-detail">
                <a href ng-click="choose(color)" style="background-color:{{color.codevalue}}"></a>
                <div class="colorname" style="margin-bottom:10px;margin-top:3px;">{{color.codevalue}}</div>
            </div>
          </div>
        </div>
    </div>
    

    That produces this, and selecting a color gives a value enter image description here

    But after updating the page, and openening the settings dialog, the value is now missing enter image description here

    I'm sure I'm missing something extremely simple.

    Any help would be awesome

Please Sign in or register to post replies

Write your reply to:

Draft