Treeview styling the nodes with extra buttons and checkboxes

[Jon]

Hi there,

I am building an App which reads data from a table and populates using a heirarchicaldataset class.

This works fine in the standard Ajax Treeview but I am struggling with the limitations of this control.

The data populates perfectly ok, but I need to conditionally add up to 5 icons to the node text on the LHS and even one or two on the RHS. I will need to have these potentially firing off functions in Javascript and/or code behind.

But I do not want to have to manage the node population in code, once I have populated my datasource I want the treeview to display with a minimal amount of fuss. I want to set up indicators in my data structure to say which icons appear and also to have checkbox for selection on the LHS.

The documentation/demo online does not seem to happily or simply support population from a dataset directly which is why I chose to use the standard asp treeview.

Does RadTreeview support node population via a heirarchicaldataset (recursive dataset) method and does it support a templated node layout?

I was thinking of a layout with a number of TD's ..

I can't see examples of this sort of thing on the demos pages.

jON

[Jon]

I find I was looking in the wrong place for details on data binding ... I have now found that documentation so I can Databind.

I am still interested in how I go about styling the node with multiple icons and a checkbox please.

Thanks

jON

[Ivan Danchev]

Hello jON,

You can customize a RadTreeView node by using a template. The following code snippet demonstrates how you can embed two images and a CheckBox in a node:

<telerik:RadTreeNode >
    <NodeTemplate>
        <div class="NodeEditor">
            <img src="images/image1.png" alt="image1" />
            <img src="images/image2.png" alt="image2" />
            <asp:CheckBox Text="CheckBox" runat="server" />
            Other content
        </div>
    </NodeTemplate>
</telerik:RadTreeNode>

You can find a live example of a RadTreeView using templates in the TreeView Templates demo.

Regards,
Ivan Danchev
Telerik

[Jon]

Thanks Ivan, that looks nice and tidy.

Without using code behind is it posible to style different levels of the tree.

At level zero I want a simple icon, at level one I want 2 icons, at level 2 I want 3 icons and 1 checkbox.

 or do I have to do this in code? The page you redirected me to suggests that I have to do it in code.

thanks

 jON

[Jon]

I found the Answer Ivan, from the link you gave me.

many thanks

jON

 

[Jon]

no, still has me struggling and I think I need to drop to code.

             

<telerik:radtreeview id="RadTreeView" runat="server" style="overflow:auto;"
        EnableDragAndDrop="True"
        datatextfield="Text" DataValueField="Text" DataFieldID="ID"
    DataFieldParentID="ParentID" ResolvedRenderMode="Classic" >
        <NodeTemplate>
            <div>
                <img src="../Images/16 x 16/doc.bmp" alt="Task Completed (90)" style="border-width:0px;">
                <img src="../Images/16 x 16/customercomplaint.png" alt="Task Completed (90)" style="border-width:0px;">
                <asp:CheckBox ID="CheckBox1" runat="server" />
                Global <%# DataBinder.Eval(Container, "Text") %>
            </div>
        </NodeTemplate>
        <Nodes>
            <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
                <Nodes>
                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                        <Nodes>
                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                                <Nodes>
                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 4">
                                        <NodeTemplate>
                                            four
                                            <%# DataBinder.Eval(Container, "Text") %>
                                        </NodeTemplate>
                                    </telerik:RadTreeNode>
                                </Nodes>
                                <NodeTemplate>
                                    three
                                    <%# DataBinder.Eval(Container, "Text") %>
                                </NodeTemplate>
                            </telerik:RadTreeNode>
                        </Nodes>
                        <NodeTemplate>
                            two
                            <%# DataBinder.Eval(Container, "Text") %>
                        </NodeTemplate>
                    </telerik:RadTreeNode>
                </Nodes>
                <NodeTemplate>
                    one
                    <%# DataBinder.Eval(Container, "Text") %>
                </NodeTemplate>
            </telerik:RadTreeNode>
        </Nodes>
</telerik:radtreeview>

every node seems to use the global template.

I am populating with a data table with ID and ParentID

can you please confirm Ivan?

many thanks

jON

[Jon]

Can anyone please let me know whether its possible to use different templates at levels 0 1 and 2 in my treeview with a data binding from a recursive dataset that contains 3 levels of node data or will I have to create the templates on the fly in code?

I just need to know whether there is any trick to doing this without having to inject templates for every single node.

I want to keep my markup clean and don't want to code any more than I have to.

thanks

jON

 

[Ivan Danchev]

Hello jON,

You can add templates to different levels of nodes. The Adding and Editing Templates at Runtime article demonstrates how to create a class that implements the ITemplate interface. You can then use the TemplateNeeded server-side event handler to add the template to a set of Nodes that match a certain condition.

In the example the template is added based on the node's Value property, in your case you can create several different templates and use the Level property to apply them to the nodes based on their level. Here's how the modified TemplateNeeded handler could look like:

protected void RadTreeView1_TemplateNeeded(object sender, RadTreeNodeEventArgs e)
{
    int level = e.Node.Level;
    if (level == 0)
    {
        var textBoxTemplate = new TextBoxTemplate();
        e.Node.NodeTemplate = textBoxTemplate;
    }
    else if (level == 1)
    {
        //load a different template
    }
}

class TextBoxTemplate : ITemplate
{
    public void InstantiateIn(Control container)
    {
        Label label1 = new Label();
        label1.ID = "ItemLabel";
        label1.Text = "Text";
        label1.Font.Size = 10;
        label1.Font.Bold = true;
        label1.DataBinding += new EventHandler(label1_DataBinding);
        container.Controls.Add(label1);
    }

    private void label1_DataBinding(object sender, EventArgs e)
    {
        Label target = (Label)sender;
        RadTreeNode node = (RadTreeNode)target.BindingContainer;
        string nodeText = (string)DataBinder.Eval(node, "Text");
        target.Text = nodeText + "Template";
    }
}

Regards,
Ivan Danchev
Telerik

[Jon]

Thanks Ivan,

I read through and also reviewed the documentation and have the desired effect.

Most modes are group headers and only need simple Text property so I set my global template to the very busy multiple IMG and check box elements where all the detail will be held and instantiated Templates in code as suggested for the group header.

all works a treat.

Now all I have to do is find a way to drag and drop a databound couple of Treeviews.

I know that strictly speaking this is not support. 

However, thinking it through, I want to use standard page cycles. I want to populate the treeviews and completely understand that once these are displayed then I will not expect to see data changes until I refresh.

So my plan is to unbind in the unload event so that, hopefully drag and drop will work (pending the other post in this forum explaining my problems with doing so)

In this way all my code with recursive data sets will still populate, I can drag and drop and then update my tables on postback before rebinding again to display a refreshed dataset which then gets unbound in the unload event.

but is there a better way?

in any case, thanks for the pointer Ivan.

 

jON

[Ivan Danchev]

Hello jON,

I am not sure whether the scenario is the same and involves dynamically adding of templates but if you just want to use drag and drop between two data bound RadTreeView controls there is no need for unbinding them on unload.

You can find attached a sample page that demonstrates the drag and drop feature between two TreeViews.

Regards,
Ivan Danchev
Telerik