title: How to create a custom container element for Orchard Layout?
body: <p>I'm using Orchard 1.9.3 and followed some tutorials on how to create a custom normal Element in Orchard. I couldn't find any specifically on creating container elements so I dug around a bit in the source and this is what I have so far:</p>
  
  <p><strong>Elements/Procedure.cs</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>public class Procedure : Container
  {
      public override string Category
      {
          get { return "Content"; }
      }
  
      public override string ToolboxIcon
      {
          get { return "\uf0cb"; }
      }
  
      public override LocalizedString Description
      {
          get { return T("A collection of steps."); }
      }
  
      public override bool HasEditor
      {
          get { return false; }
      }
  }
  </code></pre>
  
  <p><strong>Drivers/ProcedureElementDriver.cs</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>public class ProcedureElementDriver : ElementDriver&lt;Procedure&gt; {}
  </code></pre>
  
  <p><strong>Services/ProcedureModelMap</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>public class ProcedureModelMap : LayoutModelMapBase&lt;Procedure&gt; {}
  </code></pre>
  
  <p><strong>Views/LayoutEditor.Template.Procedure</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>@using Orchard.Layouts.ViewModels;
  &lt;div class="layout-element-wrapper" ng-class="{'layout-container-empty': getShowChildrenPlaceholder()}"&gt;
  &lt;ul class="layout-panel layout-panel-main"&gt;
      &lt;li class="layout-panel-item layout-panel-label"&gt;Procedure&lt;/li&gt;
      @Display()
      @Display(New.LayoutEditor_Template_Properties(ElementTypeName: "procedure"))
      &lt;li class="layout-panel-item layout-panel-action" title="@T("Delete {{element.contentTypeLabel.toLowerCase()}} (Del)")" ng-click="delete(element)"&gt;&lt;i class="fa fa-remove"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;li class="layout-panel-item layout-panel-action" title="@T("Move {{element.contentTypeLabel.toLowerCase()}} up (Ctrl+Up)")" ng-click="element.moveUp()" ng-class="{disabled: !element.canMoveUp()}"&gt;&lt;i class="fa fa-chevron-up"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;li class="layout-panel-item layout-panel-action" title="@T("Move {{element.contentTypeLabel.toLowerCase()}} down (Ctrl+Down)")" ng-click="element.moveDown()" ng-class="{disabled: !element.canMoveDown()}"&gt;&lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="layout-container-children-placeholder"&gt;
      @T("Drag a steps here.")
  &lt;/div&gt;
  @Display(New.LayoutEditor_Template_Children())
  </code></pre>
  
  <p></p>
  
  <p>All of this is more or less copied from the Row element. I now have a <code>Procedure</code> element that I can drag from the Toolbox onto my Layout but it is not being rendered with my template, even though I can override the templates for the other layout elements this way, and I still can't drag any children into it. I had hoped that simply inheriting from <code>Container</code> would have made that possible.</p>
  
  <p>I essentially just want to make a more restrictive Row and Column pair to apply some custom styling to a list of arbitrary content. How can I tell Orchard that a Procedure can only be contained in a Column and that it should accept <code>Steps</code> (or some other element) as children? </p>