Walkthrough: Adjusting Telerik RadTreeList to display visually separated items with depth level margins

10 posts, 0 answers
  1. Shukhrat Nekbaev
    Shukhrat Nekbaev avatar
    73 posts
    Member since:
    Oct 2010

    Posted 23 Aug 2011 Link to this post

    Hi there, I made a post on Adjusting Telerik RadTreeList to display visually separated items with depth level margins maybe someone will find it usefull :)

    Attachment shows the main idea

    P.S.: I always wanted to have that feature built it :)

  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 26 Aug 2011 Link to this post

    Hi Shukhrat,

    Thank you for sharing your experience with the community.
    Additionally, it would be great if you can add the code you posted in the mentioned blog to a runnable Web Site and post it as Code Library for the RadTreeList control. As a result you will be rewarded with Telerik points.

    Regards,
    Iana
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Colin
    Colin avatar
    9 posts
    Member since:
    Aug 2011

    Posted 28 Sep 2011 Link to this post

    Hi Shukrat,

    We're using your example for part of our project but running into an issue... What version of jQuery are you using for this?  We're getting a jscript error 'Telerik.Web.UI.RadTreeList' cannot be converted to type 'Sys.UI.Control' during a call to _getBaseMethod when binding.
    Any thoughts?

    Thanks!


  5. Shukhrat Nekbaev
    Shukhrat Nekbaev avatar
    73 posts
    Member since:
    Oct 2010

    Posted 28 Sep 2011 Link to this post

    Hi,

    jQuery 1.6.2 + latest Telerik.

    Also mention that you must call this function from markup of your RadTreeList: ClientSettings-ClientEvents-OnTreeListCreated="createPrettyCommentsView"
    and there is a 3rd party jQuery plugin also used from: http://james.padolsey.com/javascript/regex-selector-for-jquery/
    please refer to my article for details, let me know if I can help you further.

    P.S.: my application is ASP.NET 4.0 WebForms
  6. Colin
    Colin avatar
    9 posts
    Member since:
    Aug 2011

    Posted 03 Oct 2011 Link to this post

    Shukhrat, thank you very much for your help, that pointed me in the right direction!  I have attached my project which I hope you can help me with.  Using your excellent example as a base I am able to retrieve data from my web service and bind it to the RadTreeList control.  I am a bit stuck at the moment though.  My web service returns the contents of each data record which can be up to 11 elements but I only want to display a selected few on the screen in a similar format to your example.  The control is rendering the correct number of entries (4 total) but I don't see any data in them.

    Can you help me take the next step and extract the data from my example and display it in the tree in the proper format?  On an existing entry I would only want to display, for example, the discussion_subject, discussion_post, posted_by_name and created_date.  My web service is returning way more information and I'm not sure how to pull the proper data out and only display those pieces of information.

    Thank you again for your valuable help!  I am new to asp.net and very much appreciate it!!!!

    Here is a link to my sample project: RadTreeList sample

    Regards,
    ...Colin


  7. Shukhrat Nekbaev
    Shukhrat Nekbaev avatar
    73 posts
    Member since:
    Oct 2010

    Posted 04 Oct 2011 Link to this post

    Hi,

    well, you've done almost all the job, change your ItemTemplate of RadTreeList's first column to actually extract the data and it's done:

    <telerik:RadTreeList ID="radListComments" runat="server"
                            DataKeyNames="group_discussion_id" ParentDataKeyNames="group_discussion_parent_id"
                            AllowRecursiveDelete="True"
                            AutoGenerateColumns="False"
                            OnItemCreated="radListComments_ItemCreated"
                            OnUpdateCommand="radListComments_UpdateCommand"
                            OnInsertCommand="radListComments_InsertCommand"
                            OnDeleteCommand="radListComments_DeleteCommand"
                            OnItemDataBound="radListComments_ItemDataBound"
                            OnNeedDataSource="radListComments_NeedDataSource" BorderStyle="None">
                                <ClientSettings>
                                    <Selecting AllowItemSelection="True" />
                                    <ClientEvents OnTreeListCreated="createPrettyCommentsView"/>
                                </ClientSettings>
     
                                <EditFormSettings EditFormType="Template" >
                                    <FormTemplate>
                                    </FormTemplate>
                                </EditFormSettings>
                                 
                                <Columns>
                                    <telerik:TreeListTemplateColumn HeaderStyle-Width="80%" HeaderStyle-BackColor="White" HeaderStyle-BorderStyle="None" ItemStyle-BorderStyle="NotSet">
                                        <HeaderTemplate>
                                            <asp:Literal ID="ltrCol1"  runat="server" ></asp:Literal>
                                            <asp:LinkButton ID="NewButton" ToolTip="New Discussion" ForeColor="Green" runat="server" CommandName="InitInsert" Text="New Discussion" Font-Size="Large" Height="28px" BorderStyle="None" ></asp:LinkButton>
                                         </HeaderTemplate>
                                        <ItemTemplate>
                                            <div>
                                                Subject: <%# Eval("discussion_subject")%><br /><br />
                                                Post: <%# Eval("discussion_post")%><br />
                                                Name: <%# Eval("posted_by_name")%><br />
                                                Date created: <%# Eval("created_date") %>
                                            </div>
                                        </ItemTemplate>
                                    </telerik:TreeListTemplateColumn>
                                    <telerik:TreeListTemplateColumn HeaderStyle-BackColor="White" HeaderStyle-BorderStyle="None" ItemStyle-BorderStyle="NotSet" HeaderStyle-Width="20%">
                                        <HeaderTemplate><asp:Literal ID="ltrCol2" runat="server" /></HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:LinkButton ID="ReplyButton" ToolTip="Reply" ForeColor="Green" runat="server" Font-Size="Medium" CommandName="InitInsert" CommandArgument='<%# Eval("group_discussion_id") %>' Text="Reply">
                                            </asp:LinkButton>
                                            <asp:LinkButton ID="EditButton" ToolTip="Edit" ForeColor="Green" runat="server" Font-Size="Medium" CommandName="Edit" Text="Edit">
                                            </asp:LinkButton>
                                            <asp:LinkButton ID="DeleteButton" ToolTip="Delete" ForeColor="Green" runat="server" Font-Size="Medium" CommandName="Delete" Text="Delete">
                                            </asp:LinkButton>
                                        </ItemTemplate>
                                    </telerik:TreeListTemplateColumn>
                                </Columns>
     
                                <EditFormSettings EditFormType="Template">
                                   <FormTemplate>
                                   </FormTemplate>
                               </EditFormSettings>
                        </telerik:RadTreeList>

    Please note that you have selection enabled for items, when clicked on some item it gets selected and you don't see underlying text. No, it's not gone, it's just css issue, you may want to fix that also :) Another thing I did is that I've removed div's height to 20px, no need to limit like that, let the content "say" how big it should be.

    Basically, that's it :)
  8. Colin
    Colin avatar
    9 posts
    Member since:
    Aug 2011

    Posted 04 Oct 2011 Link to this post

    Thanks Shukhrat, you are a life-saver, that worked beautifully.  I very much appreciate you taking the time to help me out.  Thanks again!
  9. Colin
    Colin avatar
    9 posts
    Member since:
    Aug 2011

    Posted 05 Oct 2011 Link to this post

    Hello again!  I am making good progress with your help but I need some additional guidance.  I am successfully able to retrieve and format the data exactly the way I want it.  However, I am having problems with the next step, editing, inserting and updating the data.  Here are my specific issues/questions. 

    1.  I have created an radListComments_ItemCommand event handler for my InitInsert, Edit and Delete events and it never fires.  Any idea why?

    1. I need different forms/behavior for a "new discussion" (insert), a reply (to an existing discussion) and an edit.  How do I do that?  I can only see the <EditFormSettings> section where I define a template but it's only one template and I need three different types of form for my operations.  I was hoping to have the "New Discussion" drop down an area to type in the subject and the post, the edit to basically highlight the existing post and allow me to edit it and hit save/cancel and the reply would act like a new discussion just show up underneath the existing entry.

    2.  How do I trigger the radListComments_InsertCommand and radListComments_DeleteCommand events?  Those do not fire either.

    In general I'm a bit lost on the next step so anything you can do to point me in the right direction would be a huge help.

    Thanks again!

    Updated sample project here:
    http://dl.dropbox.com/u/14465749/Discussion_Thread.zip
  10. Shukhrat Nekbaev
    Shukhrat Nekbaev avatar
    73 posts
    Member since:
    Oct 2010

    Posted 10 Oct 2011 Link to this post

    Hi,

    I will get back to you some time later this week, weekends as latest (a bit busy now). Please let me know if you have solved it by that time otherwise I will adjust your solution so that it works.

    Thanks for understanding!
  11. Colin
    Colin avatar
    9 posts
    Member since:
    Aug 2011

    Posted 10 Oct 2011 Link to this post

    Shukhrat, thanks for the reply!  Telerik support gave me a hand and we managed to get it all working really well.  Thanks again for putting this together it's saved me a TON of time.

    Cheers,
    ...Colin
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017