This is a migrated thread and some comments may be shown as answers.

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

9 Answers 150 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Shukhrat Nekbaev
Top achievements
Rank 1
Shukhrat Nekbaev asked on 23 Aug 2011, 09:42 AM
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 :)

9 Answers, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 26 Aug 2011, 08:27 AM
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 >>

0
Colin
Top achievements
Rank 1
answered on 28 Sep 2011, 06:12 PM
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!


0
Shukhrat Nekbaev
Top achievements
Rank 1
answered on 28 Sep 2011, 11:48 PM
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
0
Colin
Top achievements
Rank 1
answered on 03 Oct 2011, 10:27 PM
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


0
Shukhrat Nekbaev
Top achievements
Rank 1
answered on 04 Oct 2011, 08:45 AM
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 :)
0
Colin
Top achievements
Rank 1
answered on 04 Oct 2011, 06:46 PM
Thanks Shukhrat, you are a life-saver, that worked beautifully.  I very much appreciate you taking the time to help me out.  Thanks again!
0
Colin
Top achievements
Rank 1
answered on 06 Oct 2011, 12:14 AM
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
0
Shukhrat Nekbaev
Top achievements
Rank 1
answered on 10 Oct 2011, 09:21 AM
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!
0
Colin
Top achievements
Rank 1
answered on 10 Oct 2011, 07:27 PM
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
Tags
TreeList
Asked by
Shukhrat Nekbaev
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Colin
Top achievements
Rank 1
Shukhrat Nekbaev
Top achievements
Rank 1
Share this question
or