Repeater class

The Repeater Control allows developers to quickly define a template for repeated content in markup, then define the editing form and any associated validation.

Namespace: ReFlex.Website.UserControls namespace
Assembly: ReFlex.Website.dll

Syntax

public partial class RichTextBox : ContentUserControlBase

Constructors

RichTextBox();

Remarks

When in editing mode, the Repeater control automatically stores ASP.NET TextBox.Text and CheckBox.Checked properties defined in the EditTemplate. When the Repeater is in display mode this data is passed the DisplayTemplate for binding.

Developers should use <%#Bind("") %>, or use the EditItemDataBound or DisplayItemDataBound events to include custom binding logic.

The ReFlex CMS FileManager, and the TinyMCE rich text editor can be easily included in the EditTemplate to provide an integrated editing experience for content creators.

Examples

// Codebehind
/// <summary>
/// Page init
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Init(object sender, EventArgs e)
{
    // include tinymce
    if (AdminSession.IsAuthenticated)
        Page.ClientScript.RegisterClientScriptInclude("RichTextBoxEditor", App.ObjectPath + "UserControls/RichTextBox/Resources/js/tiny_mce/tiny_mce.js");
}

/// <summary>
/// Edit databound
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void cmsRepeaterExample_EditItemDataBound(object sender, RepeaterItemEventArgs e)
{
    // set file manager link
    TextBox txt = e.Item.FindControl("txtImageUrl") as TextBox;
    if (txt != null)
        Forms.FindAndSetHyperLink(e.Item, "lnkChooseImage", "JavaScript:void(window.open('" + App.ObjectPath + "Modules/FileManager/FileManager.aspx?StartPath=~/Site/Resources/images/recentwork&ScriptUrls=" + App.Path + "Site/Resources/js/filemanager.js&LinksText=Choose%20image&LinksCommand=RepeaterChooseImage(\\'" + txt.ClientID + "\\',\\'" + App.Path + "\\');','ReFlexFileManager','width=775,height=485'));");

    // setup edit
    txt = e.Item.FindControl("txtDetails") as TextBox;
    if (txt != null)
        Forms.FindAndSetLiteral(e.Item, "litElements", txt.ClientID);
}

// FileManager integration filemanager.js
function RepeaterChoosePhoto(targetId, appPath) {
    var txt = parent.opener.document.getElementById(targetId);
    var file = document.forms[0].SelectedFilePath.value;
    if (appPath.length > 0) {
        file = "~/" + file.substring(appPath.length);
    }
    txt.value = file;
    window.close();
}

// Markup
<ReFlex:Repeater ID="cmsRepeaterExample" Behaviour="Constant" runat="server" Title="Repeater Example" OnEditItemDataBound="cmsRepeaterExample_EditItemDataBound">
    <DisplayTemplate>
    <div class="repeaterItem">
        <h1>
            <asp:Literal ID="litTitle" runat="server" Text='<%#Bind("txtTitle") %>'></asp:Literal></h1>
        <asp:Literal ID="litDetails" Text='<%#Bind("txtDetails") %>' runat="server"></asp:Literal>

        <div class="repeaterItemImage">
        <ReFlex:TemplatedHyperLink ID="lnkNavigateUrl" runat="server" NavigateUrl='<%#Bind("txtNavigateUrl") %>'
            Target="_blank">
        <ReFlex:TemplatedImage ID="imgImageUrl" runat="server" ImageUrl='<%#Bind("txtImageUrl")%>' AlternateText='<%#Bind("txtTitle") %>' /></ReFlex:TemplatedHyperLink>
        </div>
    </div>
    </DisplayTemplate>
    <EditTemplate>
    <div class="repeaterEditItem">
        <div class="repeaterEditRow">
        <label>
            Link address</label>
        <asp:TextBox ID="txtNavigateUrl" Text='<%#Bind("txtNavigateUrl") %>' Width="95%"
            runat="server"></asp:TextBox>
        </div>               
        <div class="repeaterEditRow">
        <label>
            Image Url</label>
        <asp:TextBox ID="txtImageUrl" Text='<%#Bind("txtImageUrl") %>' Width="95%" runat="server"></asp:TextBox><br />
        <asp:HyperLink ID="lnkChooseImage" runat="server">Choose image</asp:HyperLink>                       
        </div>
        <div class="repeaterEditRow">
        <label>
            Title</label>
        <asp:TextBox ID="txtTitle" Text='<%#Bind("txtTitle") %>' Width="95%" runat="server"></asp:TextBox>
        </div>
        <div class="repeaterEditRow">
        <label>
            Details UL</label><br />
        <asp:TextBox ID="txtDetails" Text='<%#Bind("txtDetails") %>' TextMode="MultiLine"
            Rows="4" Width="95%" runat="server"></asp:TextBox>
        </div>
        <div class="repeaterEditButtonRow">
        <asp:LinkButton ID="btnAddAbove" CommandName="AddNewAbove" runat="server">Add Above</asp:LinkButton>&nbsp;&nbsp;
        <asp:LinkButton ID="btnAddBelow" CommandName="AddNew" runat="server">Add Below</asp:LinkButton>&nbsp;&nbsp;
        <asp:LinkButton ID="btnRemove" CommandName="Remove" runat="server">Remove</asp:LinkButton>
        </div>
        <script type="text/javascript">
        tinyMCE.init({
        // general options
        mode : "exact",
        theme : "advanced",
        plugins : "safari,pagebreak,style,table,advhr,advimage,advlink,inlinepopups,media,searchreplace,contextmenu,paste,fullscreen,nonbreaking,xhtmlxtras,imagemanager,filemanager,ReFlexImageManager,ReFlexFileManager",
        // theme options
        theme_advanced_buttons1 : "bold,italic,underline,bullist,numlist,sub,sup,link,unlink",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",           
        //theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,media,cleanup,code",
        //theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,nonbreaking,advhr,pagebreak,|,fullscreen",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "center",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,                  
        // other options
        cleanup : true,
        auto_cleanup_word : true,       
        remove_linebreaks : false,       
        verify_html : true,   
        add_form_submit_trigger : true,           
        elements : "<asp:Literal ID="litElements" runat="server"></asp:Literal>"      
        });       
        </script>                   
    </div>
        <br />               
    </EditTemplate>
    <EditFooterTemplate>
    <div style="height: 300px;">
        &nbsp;</div>
    </EditFooterTemplate>
</ReFlex:Repeater>