Simon Busborg
9848be4e82
Changed buttons as well Added "visited" to the forum, so you can see which threads you've visited
846 lines
30 KiB
HTML
846 lines
30 KiB
HTML
<!doctype html>
|
|
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
|
|
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
|
|
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
|
|
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
<title></title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<meta name="robots" content="noindex">
|
|
|
|
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" href="assets/css/style.min.css" />
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
|
|
<![endif]-->
|
|
|
|
</head>
|
|
<body class="sidebar">
|
|
|
|
<div class="quick-menu">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
|
|
<div class="close">
|
|
<i class="icon-Delete"></i>Close
|
|
</div>
|
|
|
|
<div class="settings">
|
|
<a href="profile.html"><i class="icon-Settings"></i>Edit profile</a>
|
|
</div>
|
|
|
|
<div class="user-image">
|
|
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/anoff/128.jpg" alt="">
|
|
</div>
|
|
|
|
<div class="user-profile">
|
|
<h2>Darth Vader</h2>
|
|
<div class="karma">
|
|
2410
|
|
</div>
|
|
<div class="user-twitter">
|
|
<a href="#">@darthvader</a>
|
|
</div>
|
|
|
|
<span class="roles">
|
|
<span class="core">core</span>
|
|
<span class="mvp">mvp</span>
|
|
<span class="admin">admin</span>
|
|
<span class="hq">hq</span>
|
|
<span class="c-trib">c-trib</span>
|
|
</span>
|
|
</div>
|
|
|
|
<small>
|
|
Activity in threads you participated in
|
|
</small>
|
|
|
|
<div class="user-latest-posts">
|
|
|
|
|
|
<a href="forum-thread.html" class="forum-thread">
|
|
<div class="row">
|
|
<div class="col-xs-10 col-md-8">
|
|
<div class="forum-thread-text">
|
|
<h3>Allow user to change site design</h3>
|
|
<p>Reply by Dennis Aaen 7 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-2 col-md-4">
|
|
<div class="category frontend"><span class="cat">Frontend</span></div>
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
<a href="forum-thread.html" class="forum-thread">
|
|
<div class="row">
|
|
<div class="col-xs-10 col-md-8">
|
|
<div class="forum-thread-text">
|
|
<h3>Allow user to change site design</h3>
|
|
<p>Reply by Dennis Aaen 7 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-2 col-md-4">
|
|
<div class="category frontend"><span class="cat">Frontend</span></div>
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
<a href="forum-thread.html" class="forum-thread">
|
|
<div class="row">
|
|
<div class="col-xs-10 col-md-8">
|
|
<div class="forum-thread-text">
|
|
<h3>Allow user to change site design</h3>
|
|
<p>Reply by Dennis Aaen 7 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-2 col-md-4">
|
|
<div class="category frontend"><span class="cat">Frontend</span></div>
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
|
|
<header>
|
|
<div class="navigation">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-md-3">
|
|
<a class="logo" href="index.html">
|
|
Our Umbraco
|
|
</a>
|
|
</div>
|
|
|
|
<div id="toggle" class="menu-toggle">
|
|
<a href="#" class="toggle cross"><span></span></a>
|
|
</div>
|
|
|
|
<nav class="col-md-9">
|
|
|
|
<ul>
|
|
<li><a href="forum.html">Forum</a></li>
|
|
<li><a href="#">Packages</a></li>
|
|
<li><a href="documentation.html">Docs</a></li>
|
|
<li><a href="#">Download</a></li>
|
|
<li><a href="#">Contribute</a></li>
|
|
<!-- <li><a href="#">Sign in</a></li> -->
|
|
<li>
|
|
<div class="user">
|
|
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/anoff/128.jpg" alt="">
|
|
<span class="notificationCount">
|
|
4
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<section class="sidebar-content">
|
|
<!-- <span class="sidebar-bg"></span>
|
|
<span class="content-bg"></span> -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<nav class="col-md-3">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<ul class="level-1">
|
|
<li>
|
|
<a href=""><h3>Getting started</h3></a>
|
|
<ul class="level-2 open">
|
|
<li>
|
|
<a href=""><h4>Setup</h4></a>
|
|
<ul class="level-3">
|
|
<li><a href=""><h5>Requirements</h5></a></li>
|
|
<li>
|
|
<a href=""><h5>Install</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Config</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Server setup</h5></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Data</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<a href=""><h5>Doc types</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Data types</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Content entry</h5></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Design</h4></a>
|
|
<ul class="level-3 open">
|
|
<li>
|
|
<a href=""><h5>Templates</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Razor</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Content/Media API</h5></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Code</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<a href=""><h5>MVC</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Events</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Forms/Conttrollers</h5></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Extend</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<a href=""><h5>Property Editors</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Trees</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Editors</h5></a>
|
|
</li>
|
|
<li>
|
|
<a href=""><h5>Angular JS</h5></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a class="active" href=""><h3>Implementation</h3></a>
|
|
<ul class="level-2">
|
|
<li>
|
|
<a href=""><h4>Routing</h4></a>
|
|
<ul class="level-3">
|
|
|
|
<li>
|
|
<h5>Routing</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Pipeline</h5>
|
|
</li>
|
|
<li>
|
|
<h5>MVC</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Request</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Content definition</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>HTML</h5>
|
|
</li>
|
|
<li>
|
|
<h5>CSS</h5>
|
|
</li>
|
|
<li>
|
|
<h5>JS</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Clientdependency</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Templating</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>MVC</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Templating</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Rendering</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Razor</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Content APIs</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Query data</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>Events</h5>
|
|
</li>
|
|
<li>
|
|
<h5>APIs</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Services</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Lowerlevel APIs</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Client side</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>Tables</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Schemas</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Migrations</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Upgrades</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a class="active" href=""><h3>Extending</h3></a>
|
|
<ul class="level-2">
|
|
<li>
|
|
<a href=""><h4>Property Editors</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>Package manifest</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Controller</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Views</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Dependencies</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Dashboards</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>View</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Sections</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Controller</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Sections</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>MVC</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Templating</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Rendering</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Razor</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Content APIs</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Trees</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>Events</h5>
|
|
</li>
|
|
<li>
|
|
<h5>APIs</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Services</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Lowerlevel APIs</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Packages</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>Tables</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Schemas</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Migrations</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Upgrades</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Languages</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>Add language</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Modify language</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href=""><h4>Database</h4></a>
|
|
<ul class="level-3">
|
|
<li>
|
|
<h5>Tables</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Schemas</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Migrations</h5>
|
|
</li>
|
|
<li>
|
|
<h5>Upgrades</h5>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h3>Umbraco v4/v6</h3>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="content markdown-syntax markdown-docs col-md-9 col-md-offset-3">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div id="body">
|
|
<div class="utilities">
|
|
<ul id="breadcrumb">
|
|
<li><a href="/documentation" rel="nofollow">Getting Started</a></li><li><a href="/documentation/Extending-Umbraco" rel="nofollow">Data</a></li><li><a href="/documentation/Extending-Umbraco/Dashboards" rel="nofollow">Data types</a></li><li><a href="/documentation/Extending-Umbraco/Dashboards" rel="nofollow">Grid Layout</a></li>
|
|
</ul>
|
|
<div class="utility-actions">
|
|
<a href="https://github.com/umbraco/Umbraco4Docs/blob/v7-documentation/index.md" id="github-link" class="button transparent tiny">Edit</a>
|
|
</div>
|
|
</div>
|
|
<div id="markdown-docs">
|
|
<span id="ContentPlaceHolderDefault_Main_Main_Markdown_lblHeader"></span>
|
|
<span id="ContentPlaceHolderDefault_Main_Main_Markdown_lblMarkdownOutput"><a name="GridLayout"></a><h1>Grid Layout</h1>
|
|
<p><code>Returns: JSON</code></p>
|
|
<p>Gives editors a grid layout editor which allows them to insert different types of content in a predefined layout</p>
|
|
<p><img src="assets/images/documentation/editor.png" alt="Grid layouts"></p>
|
|
<a name="Whataregridlayouts?"></a><h2>What are grid layouts?</h2>
|
|
<p>To understand how the grid layout editor works, we must <a href="">first understand</a> the structure of the grid layouts.</p>
|
|
<p>Grid layouts consists of two main areas that need to be configured, <em>grid layout area</em> and <em>grid rows</em>.</p>
|
|
<a name="GridLayout"></a><h4>Grid Layout</h4>
|
|
<p>The <em>layout area</em> is where the overall page layout is defined.
|
|
<em>Layout areas</em> are divided in to <em>layout sections</em> e.g. a sidebar section and content section. The size of the <em>layout sections</em> is defined in columns. For a full-width content area use max number of columns (12 for Bootstrap 3). Each <em>layout section</em> contains one or more <em>rows</em>.</p>
|
|
<p><img src="assets/images/documentation/Grid-layout-rows.jpg" alt="Grid rows"></p>
|
|
<a name="GridRows"></a><h4>Grid Rows</h4>
|
|
<p>Grid <em>rows</em> is where the actual content goes. Each row is divided into <em>cells</em> that contain the property editors. The size of the cells is defined in columns. Unlike the <em>layouts sections</em> it is possible to add more <em>cells</em> than the max number of columns - they will stack as they should in a grid system.</p>
|
|
<p><img src="assets/images/documentation/Grid-layout-NO-SIDEBAR-rows.jpg" alt="Grid structure"></p>
|
|
<a name="ConfiguringtheGridLayoutdatatype"></a><h2>Configuring the Grid Layout data type</h2>
|
|
<p>A grid layout contains multiple configuration options to allow developers to tailor the grid to a very specific site design.
|
|
The configuration can be divided into 4 overall parts:</p>
|
|
<a name="Layouts"></a><h3>Layouts</h3>
|
|
<p>A layout is the general grid "container", it contains one or more sections which content editors can use to insert pre-configured <strong>rows</strong>. There are 2 main usage scenarios of layouts:</p>
|
|
<ol>
|
|
<li>a single column layout which to the content editor will act like a full page canvas to insert elements on</li>
|
|
<li>a multiple column layout with a main content body, and one or more sidebar columns to insert lists or other sidebar widgets on.</li>
|
|
</ol>
|
|
<p><img src="assets/images/documentation/Grid-layout-scenarios.jpg" alt="Grid layout scenarios"></p>
|
|
<p>You can however configure as many layouts and layout sections as you wish, each section in the layout must be given a width in columns, so editors gets an accurate preview of their layout.</p>
|
|
<p>It is possible to setup configurable attributes (class, rel, href) and inline styling on sections.
|
|
<img src="assets/images/documentation/layouts.png" alt="Grid layouts"></p>
|
|
<a name="Rowconfigurations"></a><h3>Row configurations</h3>
|
|
<p>A row in the grid editor contains one or more cells, which divide the row into areas where editors can enter content. So a row is merely a container of areas to insert content into. When you add a new row, you are asked to give it a name, then define cells inside the row by clicking the "+" icon. Each cell has a default width set to 4, but by clicking the inserted cell you can control its width.</p>
|
|
<p>It is possible to setup configurable attributes(class, rel, href) and inline styling on rows.</p>
|
|
<p><img src="assets/images/documentation/rows.png" alt="Grid layouts"></p>
|
|
<p>You can add as many cells as you like. If they overflow the total width of the row, they will simply be arranged after each other horizontally as you'd expect in a grid system.</p>
|
|
<p><img src="assets/images/documentation/cells.png" alt="Grid layouts"></p>
|
|
<p>Each cell can by default contain any type of editor such as simple textstring editors, imagespicker, embedded media or umbraco macros. To override this behavior, uncheck the <strong>allow all editors</strong> option and you can specify which editors will be available for the row. </p>
|
|
<a name="Settingsandstyling"></a><h3>Settings and styling</h3>
|
|
<p>A grid layout can also expose custom settings - such as data-attributes or styling options - on each cell or row. This allows editors to use a friendly UI to add configuration values to grid elements. When custom settings and styles are applied, they will by default be included in the grid html as either html attributes or inline styles.</p>
|
|
<p><img src="assets/images/documentation/settings.png" alt="Grid layouts"></p>
|
|
<p>These settings and styles must be configured by developers when setting up the grid layout data type.</p>
|
|
<a name="Configuringacustomsettingorstyle"></a><h3>Configuring a custom setting or style</h3>
|
|
<p>To add a setting, click the edit settings link. This will expand a dialog showing you the raw configuration data. This data is in the JSON format and will only save if its valid JSON.</p>
|
|
<p>The settings data could look like this, with an object for each setting:</p>
|
|
<pre><code>[
|
|
{
|
|
"label": "Class",
|
|
"description": "Set a css class",
|
|
"key": "class",
|
|
"view": "textstring",
|
|
"modifier": "col-sm-{0}",
|
|
"applyTo": "row|cell"
|
|
}
|
|
]
|
|
</code></pre>
|
|
|
|
<p>The different values are:</p>
|
|
<ul>
|
|
<li><strong>label</strong> : Field name displayed in the content editor UI</li>
|
|
<li><strong>description</strong> : Descriptive text displayed in the content editor UI to guide the user</li>
|
|
<li><strong>key</strong> : The key the entered setting value will be stored under.</li>
|
|
<li><strong>view</strong> : The editor used to enter a setting value with.</li>
|
|
<li><strong>prevalues</strong> : For views that need predefined values, e.g. the radiobuttonlist view.</li>
|
|
<li><strong>modifier (optional)</strong> : A string formater to modify the output of the editor to prepend or append extra values.</li>
|
|
<li><strong>applyTo (optional)</strong> : States whether the setting can be used on a cell or a row. If either not present or empty, the setting will be shown both on Rows and Cells.</li>
|
|
</ul>
|
|
<p><strong>label</strong> and <strong>description</strong> are straight-forward.</p>
|
|
<p><strong>key</strong> defines the alias the configuration is stored under and by default the alias of the attribute will also be the attribute on the rendered html element. In the example above any value entered in this settings editor will be rendered in the grid html as:</p>
|
|
<pre><code><div **class**="VALUE-ENTERED"></div>
|
|
</code></pre>
|
|
|
|
<p>By changing the key of the setting you can modify the <code><div></code> element's attributes like <code>class</code>, <code>title</code>, <code>id</code> or custom <code>data-*</code> attributes.</p>
|
|
<p><strong>view</strong> the view defines the editor used to enter a value. By default Umbraco comes with a collection of prevalue editors:</p>
|
|
<ul>
|
|
<li>textstring</li>
|
|
<li>textarea</li>
|
|
<li>radiobuttonlist</li>
|
|
<li>mediapicker</li>
|
|
<li>imagepicker</li>
|
|
<li>boolean</li>
|
|
<li>treepicker</li>
|
|
<li>treesource</li>
|
|
<li>number</li>
|
|
<li>multivalues</li>
|
|
</ul>
|
|
<p>Alternatively you can also pass in a path to a custom view like "/app_plugins/grid/editors/view.html"</p>
|
|
<p><strong>prevalues</strong> is for views that need predefined values, e.g. the radiobuttonlist view. Prevalues are defined as strings in an array:</p>
|
|
<pre><code>"prevalues":[
|
|
"value_1",
|
|
"value_2",
|
|
"value_3"
|
|
]
|
|
</code></pre>
|
|
|
|
<p>and will translate in to three different options where each string will become a radiobutton. The strings represent the value of the options.</p>
|
|
<p><strong>modifier</strong> is a basic way to prepend, append or wrap the value from the editor in a simple string. This is especially useful when working with custom styles which often requires additional values to function. For instance if you want to set a background image you can get an image path from the image picker view. But in order for it to work with css it has to be wrapped in <code>url()</code>. In that case you set the <strong>modifier</strong> to <code>url('{0}')</code> which means that <code>{0}</code> is replaced with the editor value.</p>
|
|
<a name="Samplesettings"></a><h3>Sample settings</h3>
|
|
<p>There are many ways to combine these, here are some samples:</p>
|
|
<p><strong>Set a background image style</strong></p>
|
|
<pre><code>{
|
|
"label": "Background image",
|
|
"description": "Choose an image",
|
|
"key": "background-image",
|
|
"view": "imagepicker",
|
|
"modifier": "url('{0}')"
|
|
}
|
|
</code></pre>
|
|
|
|
<p><strong>Set a title setting</strong></p>
|
|
<pre><code>{
|
|
"label": "Title",
|
|
"description": "Set a title on this element",
|
|
"key": "title",
|
|
"view": "textstring"
|
|
}
|
|
</code></pre>
|
|
|
|
<p><strong>Set a data-custom setting</strong></p>
|
|
<pre><code>{
|
|
"label": "Custom data",
|
|
"description": "Set the custom data on this element",
|
|
"key": "data-custom",
|
|
"view": "radiobuttonlist",
|
|
"prevalues": [
|
|
"value_1",
|
|
"value_2",
|
|
"value_3"
|
|
]
|
|
}
|
|
</code></pre>
|
|
|
|
<a name="Multiplesettingsandstyles"></a><h3>Multiple settings and styles</h3>
|
|
<p>You can add multiple settings and styles configurations on a datatype. This is done by creating a new setting or style object. Remember to seperate the objects with a comma.</p>
|
|
<p><strong>Adding multiple settings</strong></p>
|
|
<pre><code>[
|
|
{
|
|
"label": "Class",
|
|
"description": "Set a class on this element",
|
|
"key": "class",
|
|
"view": "textstring"
|
|
},
|
|
{
|
|
"label": "Title",
|
|
"description": "Set a title on this element",
|
|
"key": "title",
|
|
"view": "textstring"
|
|
},
|
|
{
|
|
"label": "Custom data",
|
|
"description": "Set the custom data on this element",
|
|
"key": "data-custom",
|
|
"view": "textstring"
|
|
}
|
|
]
|
|
</code></pre>
|
|
|
|
<a name="Fullwidthsettingsandstyles"></a><h3>Full-width settings and styles</h3>
|
|
<p>It is possible to use settings and styles to add full-width background-images, background-colors and so forth. Just make sure the surrounding <em>section</em> is full-width(12 columns by default) and the <em>rows</em> inside it will automatically become full-width.</p>
|
|
<a name="Rendergridintemplate"></a><h1>Render grid in template</h1>
|
|
<p>To display the grid on a site use:</p>
|
|
<pre><code>@CurrentPage.GetGridHtml("propertyAlias")
|
|
</code></pre>
|
|
|
|
<p>This will by default use the view <code>/views/partials/grid/bootstrap3.cshtml</code> you can also use the built-in bootstrap2.cshtml view by overloading the method: </p>
|
|
<pre><code>@CurrentPage.GetGridHtml("propertyAlias", "bootstrap2")
|
|
</code></pre>
|
|
|
|
<p>or point it a custom view, which by default looks in <code>/views/partials/grid/</code> - or provide the method with a full path </p>
|
|
<pre><code>@CurrentPage.GetGridHtml("propertyAlias", "mycustomview")
|
|
@CurrentPage.GetGridHtml("propertyAlias", "/views/mycustomfile.cshtml")
|
|
</code></pre>
|
|
|
|
<a name="GridEditors"></a><h3>Grid Editors</h3>
|
|
<p>A grid editor is the component responsible for getting data into the grid - that could be a simple text field or a media picker. They're built in the same way as a property editor thus consists of 3 parts:</p>
|
|
<ul>
|
|
<li>.html view file</li>
|
|
<li>.js controller</li>
|
|
<li>.cshtml serverside renderer</li>
|
|
</ul>
|
|
<p>The view is what the editor sees, the controller handles how it acts and the cshtml determines how the entered data is rendered in the template.</p>
|
|
<a name="Grideditorconfiguration"></a><h4>Grid editor configuration</h4>
|
|
<p>All editors are specified in <code>config/grid.editors.config.js</code> file which uses the json format. Foreach editor you have an object like so: </p>
|
|
<pre><code>{
|
|
"name": "Rich text editor",
|
|
"alias": "rte",
|
|
"view": "rte",
|
|
"icon": "icon-article"
|
|
}
|
|
</code></pre>
|
|
|
|
<p>The values are:</p>
|
|
<ul>
|
|
<li><strong>name</strong>: The name of the editor</li>
|
|
<li><strong>alias</strong>: Unique alias of the editor</li>
|
|
<li><strong>icon</strong>: Icon shown to the editor, uses same icon classes as the rest of </li>
|
|
<li><strong>view</strong> the view defines the editor used to enter a value. By default Umbraco will look in <code>umbraco/views/propertyeditors/grid/editors</code> for a html view to use - but you can pass in your own path</li>
|
|
</ul>
|
|
<p>The built-in views you can use are: </p>
|
|
<ul>
|
|
<li>textstring</li>
|
|
<li>rte</li>
|
|
<li>embed</li>
|
|
<li>macro</li>
|
|
<li>media</li>
|
|
<li>rte</li>
|
|
</ul>
|
|
<a name="Sampletextstringconfig"></a><h5>Sample textstring config</h5>
|
|
<p>In most cases you will either use the textstring view, or built your own from scratch.</p>
|
|
<pre><code>{
|
|
"name": "Headline",
|
|
"alias": "headline",
|
|
"view": "textstring",
|
|
"icon": "icon-coin",
|
|
"config": {
|
|
"style": "font-size: 36px; line-height: 45px; font-weight: bold",
|
|
"markup": "<h1>#value#</h1>"
|
|
}
|
|
}
|
|
</code></pre>
|
|
|
|
<p>In this sample, the <code>config.style</code> value is applied to the editor so users can see an accurate preview in the backoffice, and <code>config.markup</code> is the string rendered on the server side.</p>
|
|
<a name="Buildyourowneditor"></a><h4>Build your own editor</h4>
|
|
<p>Create a file in <code>/app_plugins/yourpackage/editor.html</code> and add the following to the editor.html file: </p>
|
|
<pre><code><textarea rows="1" ng-model="control.value" ng-style="control.config"></textarea>
|
|
</code></pre>
|
|
|
|
<p>Save the file and add an editor to the <code>grid.editors.config.js</code> file:</p>
|
|
<pre><code>{
|
|
"name": "Code",
|
|
"alias": "code",
|
|
"view": "/app_plugins/yourpackage/editor.html",
|
|
"icon": "icon-code",
|
|
"config": {
|
|
"color": "red",
|
|
"text-align": "right"
|
|
}
|
|
}
|
|
</code></pre>
|
|
|
|
<p>Add a new file: <code>/app_plugins/yourpackage/editor.cshtml</code> - this file will handle rendering the entered data - this path is done by convention so: </p>
|
|
<ul>
|
|
<li>view: 'editor' => <code>views/partials/grid/editors/editor.cshtml</code></li>
|
|
<li>view: '/app_plugins/path.html' => <code>/app_plugins/path.cshtml</code></li>
|
|
</ul>
|
|
<p>If you wish to use something entirely different you can give the editor a seperate <code>render</code> value which follow the same conventions</p>
|
|
<pre><code>{
|
|
"name": "Code",
|
|
"alias": "code",
|
|
"view": "/app_plugins/yourpackage/editor.html",
|
|
"render": "/app_plugins/yourpackage/custom-render.cshtml"
|
|
}
|
|
</code></pre>
|
|
|
|
<a name="Grideditorcontroller"></a><h5>Grid editor controller</h5>
|
|
<p>If you are building something just slightly more complex then a text area, you will need to add a controller to the grid editor view. So first add a ng-controller attribute to the grid editor html - this works just like building a property editor: </p>
|
|
<pre><code><div ng-controller="my.custom.grideditorcontroller">
|
|
<textarea>...</textarea>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<p>To wire up a controller to this view, create the file <code>/app_plugins/yourpackage/editor.controller.js</code> and add a standard angular controller declaration: </p>
|
|
<pre><code>angular.module("umbraco").controller("my.custom.grideditorcontroller", function($scope){
|
|
$scope.control.value = "my new value";
|
|
});
|
|
</code></pre>
|
|
|
|
<p>Finally, we need to tell umbraco load this javascript controller when the umbraco application boots, this is also just like building a property editor, so create a <code>package.manifest</code> file in the <code>/yourpackage</code> folder, and configure it to load your controller file. </p>
|
|
<pre><code>{
|
|
javascript:[
|
|
"/app_plugins/yourpackage/editor.controller.js"
|
|
]
|
|
}
|
|
</code></pre>
|
|
|
|
<p>So to summarize, to create a custom grid editor from scratch, you will need to: </p>
|
|
<ul>
|
|
<li>Create a grid editor view <code>.html</code> file</li>
|
|
<li>Create a grid render <code>.cshtml</code> file</li>
|
|
<li>Create a grid editor controller <code>.js</code> file</li>
|
|
<li>Create a <code>package.manifest</code> file to make umbraco load needed files</li>
|
|
<li>Register the editor in the <code>/config/grid.editors.js</code> file</li>
|
|
</ul>
|
|
<p>This process tries to be as close to building property editors as currently possible.</p>
|
|
<a name="Renderinggrideditorcontent"></a><h4>Rendering grid editor content</h4>
|
|
<p>Next add this c# to the .cshtml file: </p>
|
|
<pre><code>@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>
|
|
<pre>@Model</pre>
|
|
</code></pre>
|
|
|
|
<p>When rendering the .cshtml file will receive a dynamic model with the raw data of the editor:</p>
|
|
<pre><code>{
|
|
"value": "What ever value entered into the textarea",
|
|
"editor": {
|
|
"name": "Code",
|
|
"alias": "code",
|
|
"view": "/app_plugins/yourpackage/editor.html",
|
|
"icon": "icon-code",
|
|
"config": {
|
|
"color": "red",
|
|
"text-align": "right"
|
|
}
|
|
}
|
|
}
|
|
</code></pre>
|
|
|
|
<p>So you can now use these value to build your razor output like so:</p>
|
|
<pre><code><div style="color: @Model.config.color">@Model.value</div>
|
|
</code></pre>
|
|
|
|
</span>
|
|
</div><!-- #markdown-docs -->
|
|
|
|
<br style="clear: both">
|
|
<div class="divider"></div>
|
|
|
|
</div><!-- #body -->
|
|
</div><!-- .col-md-12 -->
|
|
</div><!-- .row -->
|
|
</div><!-- .content .markdown-syntax -->
|
|
</div><!-- .row -->
|
|
</div><!-- .container -->
|
|
</section><!-- .documentation -->
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-xs-12">
|
|
Our.umbraco.org is the community mothership for Umbraco, the open source asp.net cms. With a friendly forum for all your questions, a comprehensive documentation and the a ton of packages from the community.
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
</div> <!-- Wrapper end -->
|
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script src="//maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
|
|
<script src="assets/js/app.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
(function () {
|
|
|
|
classOnScroll('.sidebar-content nav', 'fixed', 120);
|
|
classOnScroll('header', 'sticky', 10);
|
|
|
|
// temporary sidebar fuctionality
|
|
$('.level-1 a').on('click', function (e) {
|
|
e.preventDefault();
|
|
var bla = $(this).next().attr('class');
|
|
$('.' + bla).removeClass('open');
|
|
$(this).next().toggleClass('open');
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |