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.
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
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=" ">
<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=" ">
<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
=" ">
<asp:ImageButton ID="EditButton" CommandName="Edit" runat="server" ImageUrl="~/umbraco/images/page_edit.png" AlternateText="Edit"/>
<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.
is working on a reply...