New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Forum with External Edit Form



SubjectLast modified:Author: 
Expand/Collapse all1 30 Aug 2024 14:36Mark
 
Hi all!

I was wondering how can I expand or collapse all items in RadTreeList? It seems like I would need to do a recursive call or something like that..
How can I determine if item is a parent node? 11 Oct 2011 15:51Carrie
 
I have a RadTreeList control and I want to display a Delete button only in the root items. How can I recognize a root item?
Can I have different forms in edit and insert mode? 11 Oct 2011 17:31Jose
 
Hello,

I want to show different forms for edit and insert in my treelist. I found a topic showing how to do this for RadGrid:
http://www.telerik.com/help/aspnet-ajax/grid-different-edit-forms-on-edit-and-insert.html
However, the treelist does not have an InsertItem method and I am not sure how to make this work.
Please help.

This demo demonstrates how you can use RadTreeList as a simple discussion board. It also shows how you can perform data-editing in the control using an external edit form. Here follows a description of the main points in its logic:

  • Adding/modifying posts: New post are added either as replies to current ones or from the "Start new thread" button. All insert/edit logic is performed in the Submit button Click event. There we check which item the command is fired for and what exactly is the command. Then the new values are accessed and the respective update in the database is done. A hidden field is used to save the index of the item and the latest "Edit" or "Reply" action name.
  • Using external form: In order to be able to connect the edit form to the actions inside RadTreeList, you need to manually keep track of the item that opened the edit form and for what purpose was it opened. This way you will know which record to update inside the database.

    In order to populate the edit form you can directly access the edited TreeListDataItem and use its values. You should also take care of clearing these values when the edited item (or the command) changes as well as "closing" the edit form when a built-in command like Page or ExpandCollapse takes place. This is all done in the ItemCommand event handler.

  • Expanding whole threads: The ItemTemplate of the Subject column displays a LinkButton used to expand the whole thread. This is done using the ExpandItemToLevel method of RadTreeList.

Instructions

This demo uses RadTreeList as a simple discussion platform - you can add new topics or reply to existing ones. You can notice that the replies are getting at different nested levels visualizing the relations between the different posts.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
  • Tools.xml
<%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.TreeListExamplesCSharp.Integration.DiscussionBoard.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <link href='<%= HttpUtility.HtmlEncode(Telerik.Web.SkinRegistrar.GetWebResourceUrl(Page,GetType(RadEditor), "Telerik.Web.UI.Skins.Editor.css")) %>'
            rel="stylesheet" type="text/css" />
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="scripts.js"></script>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxManager runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" CssClass="demo-container">
        <telerik:RadButton RenderMode="Lightweight" ID="BtnAddNew" runat="server" Text="Start New Thread" OnClick="BtnAddNew_Click" UseSubmitBehavior="false">
        </telerik:RadButton>
        <br />
        <br />
        <telerik:RadTreeList RenderMode="Lightweight" ID="ForumBoard" runat="server" DataKeyNames="PostID" ParentDataKeyNames="ReplyTo"
            AllowSorting="true" AutoGenerateColumns="false" GridLines="Horizontal" OnItemCommand="ForumBoard_ItemCommand"
            OnNeedDataSource="ForumBoard_NeedDataSource">
            <Columns>
                <telerik:TreeListTemplateColumn UniqueName="Subject" DataField="Subject" HeaderText="Subject">
                    <ItemTemplate>
                        <asp:LinkButton ID="LnkSubject" runat="server" CssClass="subject" CommandName="ExpandCollapse"
                            CommandArgument="ExpandAll" Text='<%#Eval("Subject") %>'></asp:LinkButton>
                    </ItemTemplate>
                </telerik:TreeListTemplateColumn>
                <telerik:TreeListBoundColumn UniqueName="DateModified" DataField="DateModified" HeaderText="Last modified:"
                    DataFormatString="{0:dd MMM yyyy HH:mm}">
                    <HeaderStyle Width="120px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn UniqueName="Author" DataField="Author" HeaderText="Author:"
                    ItemStyle-CssClass="subject">
                    <HeaderStyle Width="150px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListTemplateColumn UniqueName="Template Column" HeaderText="&nbsp;">
                    <HeaderStyle Width="140px"></HeaderStyle>
                    <ItemTemplate>
                        <telerik:RadButton RenderMode="Lightweight" ID="ReplyBtn" runat="server" Text="Reply" CommandName="Reply">
                        </telerik:RadButton>
                        <telerik:RadButton RenderMode="Lightweight" ID="EditBtn" runat="server" Text="Edit" CommandName="EditMessage">
                        </telerik:RadButton>
                    </ItemTemplate>
                </telerik:TreeListTemplateColumn>
            </Columns>
            <DetailTemplate>
                <div>
                    <asp:Label ID="LblMessage" runat="server" Text='<%#Eval("Message") %>'></asp:Label>
                </div>
            </DetailTemplate>
        </telerik:RadTreeList>
        <asp:Panel ID="EditFormPanel" runat="server" Visible="false" CssClass="EditForm">
            <div style="float: left; margin-right: 118px">
                Your Name:
            </div>
            <div style="float: left;">
                Subject:
            </div>
            <br />
            <div style="float: left; margin-right: 20px">
                <telerik:RadTextBox RenderMode="Lightweight" ID="TxtName" runat="server" MaxLength="50">
                </telerik:RadTextBox>
            </div>
            <div style="float: left; margin-right: 20px">
                <telerik:RadTextBox RenderMode="Lightweight" ID="TxtSubject" Width="274px" runat="server" MaxLength="100">
                </telerik:RadTextBox>
            </div>
            <div style="clear: left;">
            </div>
            <br />
            Your message:
            <br />
            <telerik:RadEditor RenderMode="Lightweight" ID="MessageEditor" runat="server" Width="900px" ToolsFile="Tools.xml"
                StripFormattingOptions="AllExceptNewLines">
                <CssFiles>
                    <telerik:EditorCssFile Value="demoStyles.css" />
                </CssFiles>
            </telerik:RadEditor>
            <br /><br />
            <telerik:RadButton RenderMode="Lightweight" ID="BtnSubmit" UseSubmitBehavior="false" runat="server" Text="Submit"
                OnClientClicking="demo.checkFields" OnClick="BtnSubmit_Click">
            </telerik:RadButton>
            <telerik:RadButton RenderMode="Lightweight" ID="BtnCancel" runat="server" Text="Cancel" OnClick="BtnCancel_Click">
            </telerik:RadButton>
            <!-- this input is used to keep track of the operation taking place and of the affected item -->
            <input id="EditState" type="hidden" runat="server" />
        </asp:Panel>
    </telerik:RadAjaxPanel>
    <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server">
    </telerik:RadWindowManager>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance