Databinding with a Repeater

This is simple stuff, but I wanted to store these code snippets somewhere for easy re-use…

This is how to do databinding with a Repeater control in ASP.NET.

In the ASPX file:

<asp :Repeater runat="server" ID="rptPuffar">
   <itemtemplate>
          <h1>< %# GetTitle(Container) %></h1>
          <p>< %# Eval("XYZ") %></p>
   </itemtemplate>
</asp>

In the code-behind file:

protected override void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
      PageDataCollection puffar = GetChildren(this.PuffContainer);
      rptPuffar.DataSource = puffar;
      rptPuffar.DataBind();
   }
}



protected string GetTitle(RepeaterItem item)
{
   PageData page = (PageData)item.DataItem;
   return page.PageName;
}

In Page_Load(), we connect the repeater to a datasource (in this case a collection of pages from EPiServer).

GetTitle() is a function that is called by the ItemTemplate in the repeater for extracting the string to include in the page (in this case the name of the page). Eval() can also be used directly in the ASPX file to display the value of a property.

As I said, easy stuff, but now I don’t have to write the code again the next time I need it…

How to detect if an EPiServer page is presented in DOPE mode

In some cases it may be useful to detect when an EPiServer page is displayed in DOPE (Direct On-Page Editing) mode rather than the “normal” View mode. This is how to do it:

string dopemode = Request.Params["DopeMode"];
if (!String.IsNullOrEmpty(dopemode) && dopemode.ToLower() == "enable")
{
   // DOPE mode detected!
}

This is the only way I have found to do this, but it feels like there should be a DOPE flag somewhere in the EPiServer API. If anyone has found it, please leave a comment 🙂

Resizing the Action Window panel in an EPiServer plugin

Have you ever written en EPiServer plugin for the Action Window? If so, you have probably noticed how irritatingly narrow it is. Luckily, the width can easily be adjusted by your plugin using this code:

<script>
  if (window.parent!=null && window.parent.parent!=null &&
    window.parent.parent.document.all['epCustomDIV']!=null)
  {
    window.parent.parent.document.all['epCustomDIV'].parentElement.style.pixelWidth = 500;
  }
</script>

This is the same code that the built-in EPiServer File Manager uses, so I think we can regard it as well tested. It has worked well for me, hope it helps you as well.