You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Feb 10, 2024. It is now read-only.
**Doc Type Grid Editor** is an advanced grid editor for the new Umbraco grid, offering similar functionality as the macro grid editor but using the full power of the doc type editor and data types.
19
+
**Doc Type Grid Editor** is an advanced grid editor for the new Umbraco grid, offering similar functionality as the macro grid editor but using the full power of the Doc Type editor and data types.
19
20
20
21
With the macro grid editor you are limited to only using the macro builder and thus the handful of parameter editors that are available. Of course you can create / config your own parameter editors, however this is cumbersome compared to how we can configure data types.
21
22
@@ -37,139 +38,142 @@ Before you get started, there are a number of things you will need:
37
38
38
39
### Configuring The Doc Type Grid Editor
39
40
40
-
The **Doc Type Grid Editor** is configured via the grid.editors.config.js config file located in the /Config folder. A default configuration should be installed along with the package, but for details on the configuration options, please see below.
41
+
The **Doc Type Grid Editor** is configured via the grid.editors.config.js config file located in the `~/Config` folder. A default configuration should be installed along with the package, but for details on the configuration options, please see below.
62
64
63
-
The **Nested Content** property editor is set-up/configured in the same way as any standard property editor, via the *Data Types* admin interface. To set-up your Nested Content property, create a new *Data Type* and select **Nested Content** from the list of available property editors.
64
-
65
-
You should then be presented with the **Nested Content** property editors prevalue editor as shown below.
65
+
For the main part, the root properties shouldn’t need to be modified, however the only properties that MUST not be changed are the **view** and **render** properties.
| Name | String | The name of the grid editor as it appears in the grid editor prevalue editor / selector screen. |
70
+
| Alias | String | A unique alias for this grid editor. |
71
+
| View | String | The path to the **Doc Type Grid Editor** editor view. **MUST NOT BE CHANGED**. |
72
+
| Render | String | The path to the **Doc Type Grid Editor** render view. **MUST NOT BE CHANGED**. |
73
+
| Icon | String | The icon class name to use for this grid editor (minus the '.') |
74
+
| Config | Object | Config options for this grid editor. |
68
75
69
-
The prevalue editor allows you to configure the following properties.
76
+
The **Doc Type Grid Editor** supports 3 config options, all of which are optional.
70
77
71
-
| Member | Type | Description |
72
-
|-----------------|---------|-------------|
73
-
| Doc Types | List | Defines a list of doc types to use as data blue prints for this **Nested Content** instance. For each doc type you can provide the alias of the tab you wish to render (first tab is used by default if not set) as well as a template for generating list item labels using the syntax `{{propertyAlias}}`. |
74
-
| Min Items | Int | Sets the minimum number of items that should be allowed in the list. If greater than 0, **Nested Content** will pre-populate your list with the minimum amount of allowed items and prevent deleting items below this level. Defaults to 0.
75
-
| Max Itemd | Int | Sets the maximum number of items that should be allowed in the list. If greater than 0, **Nested Content** will prevent new items being added to the list above this threshold. Defaults to 0. |
76
-
| Confirm Deletes | Boolean | Enabling this will require item deletions to require a confirmation before being deleted. Defaults to TRUE |
77
-
| Show Icons | Boolean | Enabling this will display the items doc type icon next to the name in the **Nested Content** list. |
78
-
| Hide Label | Boolean | Enabling this will hide the property editors label and expand the **Nested Content** property editor to the full with of the editor window. |
79
-
80
-
Once your data type has been configured, simply set-up a property on your page doc type using your new data type and you are set to start editing.
78
+
| Member | Type | Description |
79
+
|-----------------|----------|-------------|
80
+
| AllowedDocTypes | String[] | An array of doc type aliases of which should be allowed to be selected in the grid editor. Strings can be REGEX patterns to allow matching groups of doc types in a single entry. e.g. "Widget$" will match all doc types with an alias ending in "Widget". |
81
+
| EnablePreview | Boolean | Enables rendering a preview of the grid cell in the grid editor. |
82
+
| ViewPath | String | Set's an alternative view path for where the **Doc Type Grid Editor** should look for views when rendering. Defaults to `~/Views/Partials/` |
81
83
82
84
---
83
85
84
-
### Editing Nested Content
85
-
86
-
The **Nested Content** editor takes a lot of styling cues from the new Umbraco grid in order to keep consistency and a familiarity to content editors.
86
+
### Hooking Up The Doc Type Grid Editor
87
87
88
-
When viewing a **Nested Content** editor for the first time, you’ll be presented with a simple icon and help text to get you started.
88
+
To hook up the **Doc Type Grid Editor**, within your grids prevalue, select the row configs you want to use the **Doc Type Grid Editor** in and for each cell config, check the **Doc Type** checkbox option to true. (NB: If you changed the name in the config, then select the item with the name you enter in the config).
91
91
92
-
Simply click the  icon to start creating a new item in the list.
92
+
With the Doc Type Grid Editor enabled, from within your grid editor, you should now have a new option in the **Insert Control** dialog.
93
93
94
-
If your **Nested Content** editor is configured with multiple doc types you will be presented with a dialog window to select which doc type you would like to use.
94
+
95
95
96
-
96
+
From there, simply click the **Doc Type** icon and chose the doc type you wish to render.
97
97
98
-
Simply click the icon of the doc type you wish to use and a new items will be created in the list using that doc type.
98
+
99
99
100
-
If you only have one doc type configured for your **Nested Content** editor, then clicking the  will not display the dialog and instead will jump straight to inserting an entry in the editor for you ready to edit.
100
+
Then you should be presented with a form for all the fields in your doc type.
101
101
102
-
102
+
103
103
104
-
More items can be added to the list by clicking the  icon for each additional item.
104
+
Fill in the fields and click save. You should then see the grid populated with a preview of your item.
105
105
106
-
To close the editor for an item / open the editor for another item in the list, simply click the  icon.
106
+
107
107
108
-
108
+
Make sure save / save & publish the current page to persist your changes.
109
109
110
-
To reorder the list, simply click and drag the  icon up and down to place the items in the order you want.
110
+
---
111
111
112
-
To delete an item simply click the  icon. If the minimum number of items is reached, then the  icon will appear greyed out to prevent going below the minimum allowed number of items.
112
+
### Rendering a Doc Type Grid Editor
113
113
114
-
#### Single Item Mode
114
+
The **Doc Type Grid Editor** uses standard ASP.NET MVC partials as the rendering mechanism. By default it will look for partial files in `~/Views/Partials` with a name that matches the doc type alias. For example, if your doc type alias is `TestDocType`, the Doc Type Grid Editor will look for the partial file `~/Views/Partials/TestDocType.cshtml`.
115
115
116
-
If **Nested Content** is configured with a minimum and maximum item of 1, then it goes into single item mode.
116
+
To access the properties of your completed doc type, simply have your partial view inherit the standard `UmbracoViewPage` class, and you’ll be able to access them via the standard `Model` view property as a native `IPublishedContent` instance.
117
117
118
-
In single item mode, there is no icon displayed to add new items, and the single items editor will be open by default and it’s header bar removed.
118
+
```
119
+
@inherits Umbraco.Web.Mvc.UmbracoViewPage
120
+
<h3>@Model.Name</h3>
121
+
```
119
122
120
-
In this mode,** Nested Content** works more like a fieldset than a list editor.
123
+
Because we treat your data as a standard `IPublishedContent` entity, that means you can use all the property value converters you are used to using, as well as the build in `@Umbraco.Field(...)` helper methods.
121
124
122
-
125
133
126
-
### Rendering Nested Content
127
134
128
-
To render the stored value of your **Nested Content** property, a built in value convert is provided for you. Simply call the `GetPropertyValue<T>` method with a generic type of `IEnumerable<IPublishedContent>` and the stored value will be returned as a list of `IPublishedContent` entity.
135
+
#### Rendering Alternative Preview Content
129
136
130
-
Example:
137
+
If your front end view is rather complex, you may decide that you want to feed the back office preview an alternative, less complex view. To do this, within your Razor view/partial, simply check for a querystring parameter `dtgePreview` being set to "1" to detect being in preview mode to provide an alternative view.
131
138
132
-
```csharp
139
+
```
133
140
@inherits Umbraco.Web.Mvc.UmbracoViewPage
134
-
@{
135
-
var items =Model.GetPropertyValue<IEnumerable<IPublishedContent>>("myProperyAlias");
136
-
137
-
foreach(var item in items)
138
-
{
139
-
// Do your thang...
140
-
}
141
+
@if (Request.QueryString["dtgePreview"] =="1")
142
+
{
143
+
// Render preview view
144
+
}
145
+
else
146
+
{
147
+
// Render front end view
141
148
}
142
149
```
143
150
144
-
Because we treat each item as a standard `IPublishedContent` entity, that means you can use all the property value converters you are used to using, as-well as the built in `@Umbraco.Field(...)` helper methods.
151
+
#### DocTypeGridEditorSurfaceController
145
152
146
-
Example:
147
-
```csharp
148
-
@inherits Umbraco.Web.Mvc.UmbracoViewPage
149
-
@{
150
-
var items =Model.GetPropertyValue<IEnumerable<IPublishedContent>>("myProperyAlias");
153
+
If you are not the type of developer that likes to put business logic in your views, then the ability to have a controller for you partial view is a must. To help with this, the **Doc Type Grid Editor** comes with a base surface controller you can used called `DocTypeGridEditorSurfaceController`.
154
+
155
+
Simply create your controller inheriting from the above class, giving it a class name of `{DocTypeAlias}SurfaceController` and an action name of `{DocTypeAlias}` and the **Doc Type Grid Editor** will automatically wire it up for you and use it at render time.
151
156
152
-
foreach(var item in items)
157
+
```csharp
158
+
publicclassTestDocTypeSurfaceController
159
+
: DocTypeGridEditorSurfaceController
160
+
{
161
+
public ActionResult TestDocType()
153
162
{
154
-
<h3>@item.GetPropertyValue("name")</h3>
155
-
@Umbraco.Field(item, "bodyText")
163
+
// Do your thing...
164
+
returnCurrentPartialView();
156
165
}
157
166
}
158
167
```
159
168
160
-
#### Single Item Mode
161
-
162
-
If your **Nested Content** property editor is configured in single item mode then the value converter will automatically know this and will return a single `IPublishedContent` entity rather than an `IEnumerable<IPublishedContent>` list. Therefore, when using **Nested Content** in single item mode, you can simply call `GetPropertyValue<T>` with a generic type of `IPublishedContent` and you can start accessing the entities property straight away, rather than having to then fetch it from a list first.
169
+
By inheriting from the `DocTypeGridEditorSurfaceController` base class, you'll also have instant access to the following helper properties / methods.
163
170
164
-
Example:
165
-
```csharp
166
-
@inherits Umbraco.Web.Mvc.UmbracoViewPage
167
-
@{
168
-
var item =Model.GetPropertyValue<IPublishedContent> ("myProperyAlias");
| Model | IPublishedContent | The IPublishedContent instance for you cells data. |
174
+
| ViewPath | String | A reference to the currently configured ViewPath |
175
+
| CurrentPartialView(object model = null) | Method | Helper method to return you to the default partial view for this cell. If no model is passed in, the standard Model will be passed down. |
176
+
| PartialView(string viewName, object model = null) | Method | Helper method to return you to an alternative partial view for this cell. If no model is passed in, the standard Model will be passed down. |
0 commit comments