Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mounhim Tahtahi 41 posts 62 karma points
    Jun 04, 2010 @ 14:09
    Mounhim Tahtahi
    0

    List style like the generic properties pane in Document Types

    Hi,

    I managed to create a custom section along with the trees, etc. The custom aspx pages for the plugin folder are created as well. The normal edit forms use the same layout and style as the other umbraco backend screens by using things like PropertyPanel and the css styles.

    However I want to populate one tab with a list control (most likely a ASP:Repeater). I want the list to appear the same as the Generic Properties screen of Umbraco (when you are editing document types), meaning having collapsible panels, etc.

    Is there an easy way to achieve this. I know I can see the source of the page, etc, but I dont know which jscripts to reference and what styles to use. If anyone has done it before, please let me know.

     

    Kind regards,

     

    Mounhim

  • Mounhim Tahtahi 41 posts 62 karma points
    Jun 07, 2010 @ 23:55
    Mounhim Tahtahi
    0

    Hi, I managed to get the same look and feel. In case anyone is interested, here is a snippet of the ListView control I used:

     

     

     

    <asp:ListView ID="myListView" runat="server" DataSourceID="linqDatasource" DataKeyNames="myID" InsertItemPosition

    ="FirstItem">

     

     

     

     

    <LayoutTemplate>

     

      <div>

     

        <ul class ="genericPropertyList">

          <li id="itemPlaceHolder" runat="server" />

     

     

     

     

        </ul>

     

     

     

     

      </div>

     

     

     

     

    </LayoutTemplate>

     

     

     

     

    <EditItemTemplate>

     

     

     

     

      <li id='<%# Eval("myID")%>'>

     

     

     

     

        <div id='<%# Eval("myID")%>_form'>

     

     

     

     

          <div id='edit<%# Eval("myID")%>'>

             <umb:Pane ID="myPane" runat="server">

     

     

     

     

               <umb:PropertyPanel ID="myProperty" runat="server" Text="My Property">

     

     

     

     

                  <asp:TextBox ID="myTextBox" runat="server" CssClass="guiInputText guiInputStandardSize" Text='<%# Bind("myField")%>'></asp:TextBox>

     

     

     

     

               </umb:PropertyPanel>

     

     

     

     

               <umb:PropertyPanel ID="buttons" runat="server" Text="&nbsp;">

     

     

     

     

                  <asp:ImageButton ID="UpdateButton" CommandName="Update" runat="server" ImageUrl="~/umbraco/images/save.png" AlternateText="Save"/>

                  <asp:ImageButton ID="CancelButton" runat="server" CommandName="Cancel" ImageUrl="~/umbraco/images/arrow_undo.png" AlternateText="Cancel"/>

     

     

     

     

               </umb:PropertyPanel>

     

     

     

     

           </umb:Pane>

     

     

     

     

       </div>

     

     

     

     

      </div>

     

     

     

     

    </li>

     

     

    </EditItemTemplate>

     

     

     

     

    <InsertItemTemplate>

     

     

     

     

    <li id="new">

     

     

     

     

    <div class="propertyForm" id="new_form">

     

     

     

     

    <div id="descnew" style="padding: 0px; display: block; margin: 0px;">

     

     

     

     

    <h3 style="padding: 0px; margin: 0px;">

     

     

     

     

    <a href="javascript:expandCollapse('new');"><img src="<%=umbraco.GlobalSettings.Path%>/images/expand.png" style="FLOAT

    : right"/>Add new item</a>

     

     

     

     

    </h3>

     

     

     

     

    </div>

     

     

     

     

    <div id="editnew" ondblclick="expandCollapse('new');" style="DISPLAY: none;">

     

     

     

     

    <h3 style="padding: 0px; MARGIN: 0px;">

     

     

     

     

    <a href="javascript:expandCollapse('new');"><img src="<%=umbraco.GlobalSettings.Path%>/images/collapse.png" id="new_fold" style="FLOAT

    : right">Add new item</a>

     

     

     

     

    </h3>

     

     

     

     

    <umb:Pane ID="myPane" runat="server">

     

     

     

     

      <umb:PropertyPanel ID="myProperty" runat="server" Text="My Property">

     

     

     

     

         <asp:TextBox ID="myTextBox" runat="server" Text='<%# Bind("myField")%>'></asp:TextBox>

     

     

     

     

    </umb:PropertyPanel>

     

     

     

     

     

     

     

     

    <umb:PropertyPanel ID="buttons" runat="server" Text="&nbsp;">

     

     

     

     

    <asp:ImageButton ID="InsertButton" CommandName="Insert" runat="server" ImageUrl="~/umbraco/images/save.png" AlternateText

    ="Save"/>

     

     

     

     

    <asp:ImageButton ID="CancelButton" runat="server" CommandName="Cancel" ImageUrl="~/umbraco/images/arrow_undo.png" AlternateText="Cancel" />

     

     

     

     

    </umb:PropertyPanel>

     

     

     

     

    </umb:Pane>

     

     

     

     

    </div>

     

     

     

     

    </div>

     

     

     

     

    </li>

     

     

    </InsertItemTemplate>

     

     

     

     

    <ItemTemplate>

     

     

     

     

    <li id='<%# Eval("myID")%>'>

     

     

     

     

    <div class="propertyForm" id='<%# Eval("myID")%>_form'>

     

     

     

     

    <div id='desc<%# Eval("myID")%>' style="padding: 0px; display: block; margin: 0px;">

     

     

     

     

    <h3 style="padding: 0px; margin: 0px;">

     

     

     

     

    <a href="javascript:expandCollapse('<%# Eval("myID")%>');">

     

     

     

     

    <img src="<%=umbraco.GlobalSettings.Path%>/images/expand.png" style="FLOAT: right"/>

     

     

     

     

    <asp:ImageButton ID="DeleteButton2" CommandName="Delete" runat="server" ImageUrl="~/umbraco/images/delete_button.png" AlternateText

    ="Delete"/>

     

     

     

     

    <asp:ImageButton ID="EditButton2" CommandName="Edit" runat="server" ImageUrl="~/umbraco/images/page_edit.png" AlternateText

    ="Edit"/>

     

    Edit <%

     

    # Eval("MyField")%>

     

     

    </a>

     

     

     

     

     

     

    </h3>

     

     

     

     

    </div>

     

     

     

     

    <div id='edit<%# Eval("myID")%>' ondblclick="expandCollapse('<%# Eval("myID")%>');" style="DISPLAY: none;">

     

     

     

     

    <h3 style="padding: 0px; MARGIN: 0px;">

     

     

     

     

    <a href="javascript:expandCollapse('<%# Eval("myID")%>');"><img src="<%=umbraco.GlobalSettings.Path%>/images/collapse.png" id="<%# Eval("myID")%>_fold" style="FLOAT: right">

     

    Edit

     

     

     

     

    </a>

     

     

     

     

    </h3>

     

     

     

     

    <umb:Pane ID="myPane" runat="server">

     

     

     

     

    <umb:PropertyPanel ID="myProperty" runat="server" Text="My Property">

     

     

     

     

    <asp:Label ID="myTextBox" runat="server" Text='<%# Eval("myField")%>'></asp:Label>

     

     

     

     

    </umb:PropertyPanel>

     

     

     

     

    <umb:PropertyPanel ID="buttons" runat="server" Text

    ="&nbsp;">

     

     

     

     

    <asp:ImageButton ID="EditButton" CommandName="Edit" runat="server" ImageUrl="~/umbraco/images/page_edit.png" AlternateText="Edit"/>

    &nbsp;&nbsp;

     

     

     

     

    <asp:ImageButton ID="DeleteButton3" CommandName="Delete" runat="server" ImageUrl="~/umbraco/images/delete.small.png" AlternateText

    ="Delete"/>

     

     

     

     

    </umb:PropertyPanel>

     

     

     

     

    </umb:Pane>

     

     

     

     

    </div>

     

     

     

     

    </div>

     

     

     

     

    </li>

     

     

     

     

    </ItemTemplate>

     

     

     

     

    </asp:ListView>

     

    In the codebehind the following things have to be done:

    In the OnInit:

     

    Page.ClientScript.RegisterClientScriptBlock(

     

    this.GetType(), "GenericPropertyCss", "<link href=\"/umbraco_client/GenericProperty/genericproperty.css\" type=\"text/css\" rel=\"stylesheet\">");

    Page.ClientScript.RegisterClientScriptBlock(

     

    this.GetType(), "GenericPropertyJs", "<script src=\"/umbraco_client/GenericProperty/genericproperty.js\" type=\"text/javascript\"></script>");

     

     

    In the databound event:

     

     

     

    //For the delete button within the pane

    ImageButton myButton= (ImageButton)e.Item.FindControl("DeleteButton");

     

    if (DeleteButton!=null)

       DeleteButton.Attributes.Add(

     

    "onClick", "return confirm('" + ui.Text("areyousure") + "');");

    //For the buttons on the itemheader add:

    DeleteButton2.Attributes.Add(

     

    "style", "padding-right:5px;float:right;");

     

    and then you have a neat list, just as the generic properties page of the document type editor.

Please Sign in or register to post replies

Write your reply to:

Draft