RadTreeView - Working with multiple types of Nodes

[Brian]

Hello,

I'm new to Telerik and we are evaluating the tool sets, and so far I like what I see, but I am currently stuck on a problem with the treeview.

The goal, is to have a tree view that is comprised of folders and of reports, and when the user drags the report into the viewer, it loads (right now it's off a button click).

I have the hierarchy working, but I don't think I'm currently doing this correctly. Namely, I haven't figured out how to identify if a RadTreeNode is a Folder, or a Report, which is causing some issues. Secondly, I'm trying to set it where the folders, use the image Icons we have in the project (which I've been able to do) but because I can't 100% tell if it's a report or a folder, the only way I can set it is via if the node has no children, which won't always be the case.

I've got a lot of work to do in cleaning this up, so I figured I'd post this question and hopefully get some direction. I've been reading the documentation and it has helped me get this far, so I'll go ahead and post my code:

Thanks,

Here is my TreeView

<telerik:RadTreeView ID="reportsTree" Runat="server" EnableDragAndDrop="True" EnableDragAndDropBetweenNodes="True" Height="100%" RenderMode="Auto" Skin="Outlook" BorderStyle="Solid" BorderWidth="2px" OnNodeDrop="reportsTree_NodeDrop">
                    </telerik:RadTreeView>
                    <telerik:RadContextMenu ID="treeMenu" Runat="server" Skin="Office2010Blue" OnItemClick="treeMenu_ItemClick">
                        <Targets>
                            <telerik:ContextMenuControlTarget ControlID="reportsTree" />
                        </Targets>
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Create Folder">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Delete Folder">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadContextMenu>

I have a context menu, that I need to hook up to some events, and will do that later.

Here is the code behind that populates the TreeView

private void CreateTreeView()
        {
            // Get the list of folders
            List<Report_Folders> _folders = new List<Report_Folders>();
            _folders = rm.Report_Folders.Where(x => x.isUserFolder == false && x.isPublished == true).ToList();

            List<Report_Folders> _myFolders = new List<Report_Folders>();
            _myFolders = rm.Report_Folders.Where(x => x.isUserFolder == true && x.isPublished == true && x.UserID == myProfile.Id).ToList();

            // Get the list of reports
            List<Report> _reports = new List<Report>();
            _reports = rm.Reports.Where(x => x.OwnerID == 0 && x.isPublished == true).ToList();

            List<Report> _myReports = new List<Report>();
            _myReports = rm.Reports.Where(x => x.OwnerID == myProfile.Id && x.isPublished == true).ToList();

            List<TreeViewItem> treeNotes = new List<TreeViewItem>();

            //foreach (Report_Folders item in _folders.Where(x => x.ParentID == null && x.isPublished == true))
            //{
            //    treeNotes.Add(new TreeViewItem(item.FolderName, item.FolderID, item.ParentID, _folders, _reports));
            //}

            foreach (Report_Folders item in _folders)
            {
                treeNotes.Add(new TreeViewItem(item.FolderName, item.FolderID, item.ParentID, true, null));
            }

            foreach (Report_Folders item in _myFolders)
            {
                treeNotes.Add(new TreeViewItem(item.FolderName, item.FolderID, item.ParentID, true, null));
            }

            foreach (Report item in _reports)
            {
                treeNotes.Add(new TreeViewItem(item.ReportName, item.ReportID, item.FolderID, false, item));
            }

            foreach (Report item in _myReports)
            {
                treeNotes.Add(new TreeViewItem(item.ReportName, item.ReportID, item.FolderID, false, item));
            }

            reportsTree.DataFieldID = "ValueID";
            reportsTree.DataValueField = "ValueID";
            reportsTree.DataTextField = "ValueName";
            reportsTree.DataFieldParentID = "ParentID";
            //reportsTree.data
            reportsTree.DataMember = "TreeViewItem";
            reportsTree.DataSource = treeNotes;

            ddlFolders.DataSource = treeNotes.Where(x => x.isFolder == true);
            ddlFolders.DataTextField = "ValueName";
            ddlFolders.DataValueField = "ValueID";
            ddlFolders.DataBind();

            reportsTree.DataBind();

            foreach (RadTreeNode item in reportsTree.Nodes)
            {
                foreach (RadTreeNode sub in item.Nodes)
                {
                    sub.ImageUrl = "~/Content/Images/SmallImages/folder.png";
                    sub.ExpandedImageUrl = "~/Content/Images/SmallImages/open.png";
                }

                item.ImageUrl = "~/Content/Images/SmallImages/folder.png";
                item.ExpandedImageUrl = "~/Content/Images/SmallImages/open.png";
            }

            reportsTree.ExpandAllNodes();
        }

As you can see, I have a collection of TreeViewItem which I populate from the Reports_Folders table, and the Reports table. It has properties like this:

public TreeViewItem(string Name, int ID, int? _pID, bool _isThisfolder, Report _reportValue)
        {
            this.ValueId = ID;
            this.ValueName = Name;
            this.ParentID = _pID;
            this.isFolder = _isThisfolder;
            this.SelectedReport = _reportValue;
        }

I would like to set it's image properties, but for the time being, I don't know if I'm doing this correctly, or if there is a better way to go about setting up this tree view the way that I want it to be handled. 

The main issue right now, is that I can't seem to get TreeViewItem from the selected node in the treeview, so I'm a bit confused. 

If you can help point me in the right direction that would be fantastic. I've been reading the documentation over on http://www.telerik.com/help/aspnet-ajax/treeview-data-binding-hierarchical.html but am still not 100% there.

[Hristo Valyavicharski]

Hi Brian,


Try to add custom attribute to every node to determine if it is a folder or file.  http://www.telerik.com/help/aspnet-ajax/treeview-attributes-overview.html

Then enable the tree's drag and drop functionality and load the report:

<telerik:RadTreeView runat="server" ID="RadTreeView1" EnableDragAndDrop="true" OnClientNodeDropping="OnClientNodeDropping" EnableDragAndDropBetweenNodes="true">
</telerik:RadTreeView>

<script>
    function OnClientNodeDropping(sender, args) {
        var reportName = args.get_sourceNode().get_value();

        loadReport(reportName);
    }
</script>

You are setting the image correctly. It should be defined in the node's properties.

Regards,
Hristo Valyavicharski
Telerik