Hi Anders,

Welcome to Our!

In Umbraco v6 there are two property editors which can do this, they are called Ultimate Picker and XPath Checkbox List, unhelpfully for you neither of these exist in v7 currently.

There is a excellent blog post which shows show to create a v7 property editor which renders a drop down select, it should be possible to adapt this to a checkbox list.

Jeavon

This is precisely what I want to do as well Anders and I would love to know how your version is going. So far I've managed to generate the checkbox list and record whether the data is selected.

But I'm stuck on a couple of questions:

1. How do I save the result (I'll take either a comma separated string of ids or a JSON object) back to umbraco on save?
2. How do I populate the list without overwriting any saved values?

Here is my code: (please ignore the naming, I started from a tutorial and haven't re-factored yet)

package.manifest

{
propertyEditors: [
    {
        alias:  "Dos.MarkdownEditor",
        name:   "DOS Markdown Editors",
        editor: {
            view: "~/App_Plugins/MarkDownEditor/markdowneditor.html",
            valueType: "JSON"
        }
    }
]
,
javascript: [
    '~/App_Plugins/MarkDownEditor/markdowneditor.controller.js'
    ]
}

markdowneditor.html

<div ng-controller="Dos.MarkdownEditorController">
<ul>
    <li ng-repeat="tag in tagList | orderBy:'name'">

        <input 
            type="checkbox" 
            id="tag-{{tag.id}}"  
            ng-model="tag.selected" 
            name="selectedTags[]"
            value="{{tag.id}}" /> 

        <label for="tag-{{tag.id}}">{{tag.name}}</label>
    </li>
</ul>
<!--- test data dump -->
<pre>{{tagList|json}}</pre>
<pre>{{selection|json}}</pre>

<input ng-model="model.value" />
</div>

markdowneditor.controller.js

angular.module("umbraco")
.controller("Dos.MarkdownEditorController",
    function ($scope, contentResource) {

        //get the content node from umbraco
        //TODO: allow the source node to be selected from a filtered set of nodes of type TagContainer
        //TODO: figure out how to populate the checkbox list without overwriting selected checkboxes...
        contentResource.getChildren(6074)
            .then(function (data) {

                var tagList = [];

                //create a new collection of objects that only have the node data I care about
                for (x in data.items) {
                    var newTag = {};
                    newTag.name = data.items[x].name;
                    newTag.selected = false;
                    newTag.id = data.items[x].id;

                    tagList.push(newTag);
               }    
                //debug the object collection
                console.log(tagList);

                //assign the object collection to the scope so the view can see it.
                $scope.tagList = tagList;
            });

        //this code was all copied from How can Angular Js bind to a list of checkbox values (http://jsbin.com/ImAqUC/1)

        //this is initializing a variable that knows which boxes are checked...
        $scope.selection = [];

        //helper method for something...don't relly understand why though
        $scope.selectedTags = function selectedTags() {
            return filterFilter($scope.tagList, { selected: true });
        };

        //watch tagList for changes. This seems optional in the setup I'm using...
        $scope.$watch('tagList|filter:{selected:true}', function(nv) {
            $scope.selection = nv.map(function(tagList) {
                return tagList.id;
            });
        }, true);

        //this was an attempt to make the modified taglist save....
        $scope.model.value = $scope.tagList;

        //this may be needed if I actually have to manually save it...
        /*
        $scope.on("formSubmitting", funcion(eval,args)
        {
            editor.onFormSubmit();

        }); */

    });

Thoughts, ideas, or corrections would be greatly appreciated.

Looking promising Sunshine! Please share if/when your straighten out the questionmarks!

Unfortunately I do not have the time to develop stuff for the CMS, I have to produce sites so I backed to Umbraco 6.1.6 and built the my "datalists" around XPath and it works fine.

Hi guys, I have just got a checkbox list property editor working, it saves to Umbraco and saved which checkboxes have been checked, hope it helps:- (if anyone can recommend improvements to this that will be much appreciated)

angular.module("umbraco").controller("Cfg.productSelectorController",
function ($scope, $http) {
    //Load current data from Umbraco DB to new scope
    $scope.UmbracoData = $scope.model.value;

    //Make Products scope an array
    $scope.Products = new Array();

    //Get Data from api
    $http({ method: "Get", url: "Api/Catalogue/GetAllProducts" })
        .success(function (data) {

            //Add api data to Product scope
            for (var x = 0; x < data.length; x++) {
                $scope.Products.push({ Info: data[x], Selected: false });
            }

            $scope.ProductName = data.Name;

            //Keeps check box choices checked after save and publish
            updatePropertyView($scope.Products);

        })
        .error(function () {
            $scope.error = "Property editor failed to load";
        })

    //Listen for any changes to the scope i.e. changes in the checked state of checkboxes
    $scope.$watch("Products", function (newVal, oldVal) {
        $scope.model.value = new Array();

        for (var x = 0; x < $scope.Products.length; x++) {
            if ($scope.Products[x].Selected == true) {
                $scope.model.value.push($scope.Products[x].Info.ProductID)
            }
        }


    }, true);

    //Keeps check box choices checked after save and publish
    function updatePropertyView(Products) {

        for (var x = 0; x < $scope.UmbracoData.length; x++) {
            var index = findIndex(Products, $scope.UmbracoData[x]);
            if(index != -1){
                $scope.Products[index].Selected = true;
            }
        }
    }

    //Returns the index of an array
    function findIndex(arr, item) {
        var index = -1;
        for (var x = 0; x < arr.length; x++) {
            if (arr[x].Info.ProductID == item) {
                index = x;

                return index;
            }
        }

        return index;

    }


});

Hi, just thought I'd add that there are now v7 versions of the XPath pickers in nuPickers (also includes CheckBox pickers that can be used with a variety of data-sources)

is working on a reply...