Skip to content

Commit f8df636

Browse files
anthonykoerberanthonykoerber
committed
new documentation for grid WIP
1 parent c25e072 commit f8df636

5 files changed

Lines changed: 224 additions & 124 deletions

File tree

‎docs/articles/grid_config.md‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -80,27 +80,4 @@ For grids that need to expand beyond the bounds of their containers / window, th
8080
<mm-grid viewport-width="1500"></mm-grid>
8181
```
8282

83-
### Custom Item Templates - mm-grid-item
84-
The grid is quite extendable and can utilize a user-defined template to generate grid items. We recommend utilizing the built-in `mm-grid-item` component, as it works in tandem with the grid. Things like resizable columns, selections, and expansions work out of the box.
85-
86-
In order to use a custom template we define the `item-template` attribute of the grid. This can either be a string with the id of the template we are using, or can point directly to a template DOM fragment. We define the template inside our grid with a `<template>` tag. Here we define an `<mm-grid-item>` with the attributes `model` and `scope`. These are two special attributes that give us a particular grid item's model as well as giving us access to the "scope" of the grid itself.
87-
88-
Defining `<div field="...">` inside of an `mm-grid-item` allows us to override that particular data field's DOM. In the example below we have overridden the "first_name" column with some custom text.
89-
90-
```html
91-
<mm-grid item-template="customTemplate">
92-
<mm-grid-column field="first_name">First Name</mm-grid-column>
93-
<mm-grid-column field="last_name">Last Name</mm-grid-column>
94-
<mm-grid-column field="email">Email</mm-grid-column>
95-
96-
<template id="customTemplate">
97-
<mm-grid-item model="{{model}}" scope="{{scope}}">
98-
<div field="first_name">
99-
Custom Text - {{model.first_name}}
100-
</div>
101-
</mm-grid-item>
102-
</template>
103-
</mm-grid>
104-
```
105-
10683
#### Continue Reading &#8594; [Data Integration with mm-grid](article_grid_data_integration.html)

‎docs/articles/grid_custom_grid_item.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# Creating Custom Grid Items
2+
3+
## Overview
4+
The grid is quite extendable and can utilize a user-defined template to generate grid items. We recommend utilizing the built-in `mm-grid-item` component, as it works in tandem with the grid - resizable columns, selections, and expansions work out of the box. However, there will undoubtedly be situations where grid items require a more customized approach.
5+
6+
### Creating a custom grid item template
7+
In order to use a custom template we create a `template` DOM fragment inside of our `mm-grid` tag. Note that the template tag must include the attribute `preserve-content` [TODO: because... more detailed reason here].
8+
9+
In this example, we define an `<mm-grid-item>` with the attributes `model` and `scope`. These are two special attributes that give us a particular grid item's model as well as giving us access to the "scope" of the grid itself.
10+
11+
Defining `<div field="...">` inside of an `mm-grid-item` allows us to override that particular data field's DOM. In the example below we have overridden the "first_name" column, adding an icon and some custom text.
12+
13+
```html
14+
<mm-grid id="customItems">
15+
<mm-grid-column field="first_name">First Name</mm-grid-column>
16+
<mm-grid-column field="last_name">Last Name</mm-grid-column>
17+
<mm-grid-column field="email">Email</mm-grid-column>
18+
19+
<template preserve-content>
20+
<mm-grid-item model="{{model}}" scope="{{scope}}">
21+
<div field="first_name">
22+
<span>Star Employee: {{model.first_name}}</span>
23+
<mm-icon width="15" height="15" type="favorite"></mm-icon>
24+
</div>
25+
</mm-grid-item>
26+
</template>
27+
</mm-grid>
28+
29+
<script>
30+
window.addEventListener("WebComponentsReady", function() {
31+
var customItems = document.querySelector('#customItems');
32+
33+
customItems.data = [
34+
{ id:0, first_name: "Bob", last_name: "Smith", email: "bsmith@gmail.com" },
35+
{ id:1, first_name: "Jane", last_name: "Doe", email: "jdoe@gmail.com" },
36+
{ id:2, first_name: "Rick", last_name: "James", email: "rjames@gmail.com" },
37+
...
38+
];
39+
});
40+
</script>
41+
42+
```
43+
44+
### Using positionable Strand components in a custom grid item template
45+
When adding some of the web components from the Strand library to a custom grid item, there will be some additional configuration required. Most of the 'positionable' components in the Strand library (see: [mm-popover](mm-popover.html), [mm-tooltip](mm-tooltip.html), and [mm-menu](mm-menu.html)) require that a `target` element be specified. Normally, it is sufficient to simply to supply an id string to this attribute, but custom grid items represent a special case.
46+
47+
#### Adding a target to a positionable component in a custom grid item template
48+
To supply a `target` to a positionable component in a custom grid item, a convenience method is available on all Strand components, called `findById()`. Giving the target element an id. Next, on the positionable element, bind the property `target={{findById('someTargetId')}}`. The positionable component will work as expected within the custom grid item. NOTE: this approach is not necessary when using positionable components outside of a custom grid item template.
49+
50+
```html
51+
<mm-grid id="customItems">
52+
<mm-grid-column field="first_name">First Name</mm-grid-column>
53+
<mm-grid-column field="last_name">Last Name</mm-grid-column>
54+
<mm-grid-column field="email">Email</mm-grid-column>
55+
<mm-grid-column field="actions">Actions</mm-grid-column>
56+
57+
<template preserve-content>
58+
<mm-grid-item model="{{model}}" scope="{{scope}}">
59+
<div field="actions">
60+
<mm-icon type="actions" id="actionMenuIcon" width="15" height="15"></mm-icon>
61+
<mm-menu id="actionsMenu" direction="s" offset="15" model="{{model}}" target="{{findById('actionMenuIcon')}}">
62+
<mm-list-item value="m1">{{model.name}} action 1</mm-list-item>
63+
<mm-list-item value="m2">{{model.name}} action 2</mm-list-item>
64+
<mm-list-item value="m3">{{model.name}} action 3</mm-list-item>
65+
<mm-list-item value="m4">{{model.name}} action 4</mm-list-item>
66+
<mm-list-item value="m5">{{model.name}} action 5</mm-list-item>
67+
</mm-menu>
68+
</div>
69+
</mm-grid-item>
70+
</template>
71+
</mm-grid>
72+
73+
<script>
74+
window.addEventListener("WebComponentsReady", function() {
75+
var customItems = document.querySelector('#customItems');
76+
77+
customItems.data = [
78+
{ id:0, first_name: "Bob", last_name: "Smith", email: "bsmith@gmail.com" },
79+
{ id:1, first_name: "Jane", last_name: "Doe", email: "jdoe@gmail.com" },
80+
{ id:2, first_name: "Rick", last_name: "James", email: "rjames@gmail.com" },
81+
...
82+
];
83+
});
84+
</script>
85+
86+
```

‎docs/articles/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
},
99
{
1010
"key":"grid_intro",
11-
"children":["grid_config", "grid_data_integration"]
11+
"children":["grid_config", "grid_custom_grid_item", "grid_data_integration"]
1212
},
1313
{
1414
"key":"migration_guide"

‎docs/articles/migration_guide.md‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,26 +31,23 @@ Previously, a `bindModel` method was provided as a convenience to bind a propert
3131

3232
---
3333

34-
## Removal of unresolved attribute
35-
Previously, if an attribute of `unresolved` was added to a component, that attribute would be removed by Polymer 0.5 when the component was upgraded. Currently, the `unresolved` attribute may be used on the `body` element only.
34+
## The unresolved attribute
35+
Although Polymer no longer supports the `unresolved` attribute per component (the `unresolved` attribute may still be used on the `body` element), Strand still supports this via the `StrandTraits.Resolvable` behavior. The `unresolved` attribute will be removed upon component `ready`.
3636

37-
Before:
37+
Before & After:
3838
```html
39+
<style>
40+
mm-dropdown[unresolved] {
41+
display: none;
42+
}
43+
</style>
44+
3945
<mm-dropdown placeholder="Select One" unresolved>
4046
...
4147
</mm-dropdown>
4248

4349
```
4450

45-
After:
46-
```html
47-
<body unresolved>
48-
<mm-dropdown placeholder="Select One">
49-
...
50-
</mm-dropdown>
51-
</body>
52-
```
53-
5451
---
5552

5653
## mm-icon
@@ -64,12 +61,12 @@ Before:
6461
After:
6562
```html
6663
<style>
67-
#myIcon {
68-
color: #666666;
69-
}
70-
#myIcon:hover {
71-
color: #333333;
72-
}
64+
#myIcon {
65+
color: #666666;
66+
}
67+
#myIcon:hover {
68+
color: #333333;
69+
}
7370
</style>
7471
<mm-icon type="actions" width="32" height="32"></mm-icon>
7572
```

0 commit comments

Comments
 (0)