yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update umbContentGrid docs to match latest directive changes

Browse Source
This commit is contained in:
Mads Rasmussen
2016-02-16 09:49:12 +01:00
committed by Rune Strand
parent 8abeefe6bb
commit 571d8086c8
1 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js
View File

@@ -12,10 +12,10 @@ Use this directive to generate a list of content items presented as a flexbox gr
<div ng-controller="Umbraco.Controller as vm">
<umb-content-grid
content="vm.contentItems"
content-properties="vm.includeProperties"
on-click="vm.clickItem"
on-select="vm.selectItem">
content="vm.contentItems"
content-properties="vm.includeProperties"
on-click="vm.selectItem"
on-click-name="vm.clickItem">
</umb-content-grid>
</div>
@@ -26,15 +26,36 @@ Use this directive to generate a list of content items presented as a flexbox gr
(function () {
"use strict";
function Controller(myService) {
function Controller() {
var vm = this;
vm.contentItems = [];
vm.includeProperties = {
{
"alias": "sortOrder",
"header": "Sort"
vm.contentItems = [
{
"name": "Cape",
"published": true,
"icon": "icon-document",
"updateDate": "15-02-2016",
"owner": "Mr. Batman",
"selected": false
},
{
"name": "Utility Belt",
"published": true,
"icon": "icon-document",
"updateDate": "15-02-2016",
"owner": "Mr. Batman",
"selected": false
},
{
"name": "Cave",
"published": true,
"icon": "icon-document",
"updateDate": "15-02-2016",
"owner": "Mr. Batman",
"selected": false
}
];
vm.includeProperties = [
{
"alias": "updateDate",
"header": "Last edited"
@@ -43,20 +64,17 @@ Use this directive to generate a list of content items presented as a flexbox gr
"alias": "owner",
"header": "Created by"
}
};
];
vm.clickItem = clickItem;
vm.selectItem = selectItem;
myService.getContentItems().then(function(contentItems){
vm.contentItems = contentItems;
});
function clickItem(item){
function clickItem(item, $event, $index){
// do magic here
}
function selectItem(item, event, index) {
function selectItem(item, $event, $index) {
// set item.selected = true; to select the item
// do magic here
}
@@ -73,8 +91,10 @@ Use this directive to generate a list of content items presented as a flexbox gr
<h3>The callback returns:</h3>
<ul>
<li><code>item</code>: The clicked item</li>
<li><code>$event</code>: The select event</li>
<li><code>$index</code>: The item index</li>
</ul>
@param {callback=} onSelect (<code>binding</code>): Callback method to handle click events on the checkmark icon.
@param {callback=} onClickName (<code>binding</code>): Callback method to handle click events on the checkmark icon.
<h3>The callback returns:</h3>
<ul>
<li><code>item</code>: The selected item</li>