Deleting item when using TreeNodeExpandMode.ServerSideCallBack

[Andrew]

I have untill now been using the

TreeNodeExpandMode

 

.ServerSide expend mothod.

I have also a button that deletes nodes from my treeview.
It works fine as long as i use ServerSide expend mode.

This is my code:

 

protected

 

void Page_Load(object sender, EventArgs e)

 

{

    LoadRootNodes(catTreeView,

TreeNodeExpandMode.ServerSide);

 

}

 

 

protected

 

void NodeExpand(object sender, RadTreeNodeEventArgs e)

 

{

 

if (e.Node.Nodes.Count == 0)

 

PopulateNodeOnDemand(e,

TreeNodeExpandMode.ServerSide);

 

}

 

 

protected

 

void uxDeleteCategory_Click(object sender, EventArgs e)

 

{

 

LinkButton thisButton = (LinkButton)sender;

 

 

RadTreeNode thisNode = (RadTreeNode)thisButton.Parent;

 

 

int usedTimes = int.Parse(((Label)thisNode.FindControl("itemsCount")).Text);

 

 

if (thisNode.Nodes.Count == 0 && usedTimes == 0)

 

{

DeleteCategory(thisNode.Value);

thisNode.Remove();

}

 

else

 

message1.Message =

"Cannot delete this item!";

 

}

 

 

<

 

asp:LinkButton OnClientClick="return blockConfirm('Are you sure you want to delete this?', event, 330, 100,'','Delete Category');"

 

 

ID="deleteCategoryButton" OnClick="uxDeleteCategory_Click" runat="server" Text='<%$Resources:Delete %>'></asp:LinkButton>

 

 

 

The methods that populate and delete the actual items from the database are not included but are simply methods with linq code to do the required work.

Also, as you can see the delete is a simple link button, that causes a post back. And that is where the problem comes in.
As soon as i change my code to ServerSideCallBack expend method, i can no longer delete anything bellow the root in my treeview.
I can delete in the root because the root nodes are reloaded with the post back, but the other nodes are not.

I gather that i need to do my deleting in some different way when using ServerSideCallBack, can anyone tell me how i would go about that?

Thanks

A

 

[Veselin Vasilev]

Hi Andrew,

I could not reproduce the problem in a simple project:

<telerik:RadTreeView ID="RadTreeView1" runat="server"
    onnodeexpand="RadTreeView1_NodeExpand">
    <Nodes>
        <telerik:RadTreeNode Text="root" ExpandMode="ServerSideCallBack"></telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

<asp:Button ID="Button2" runat="server" Text="Delete" onclick="Button2_Click" />

protected void RadTreeView1_NodeExpand(object sender, RadTreeNodeEventArgs e)
{
    e.Node.Nodes.Add(new RadTreeNode("child"));
}

protected void Button2_Click(object sender, EventArgs e)
{
    RadTreeView1.Nodes[0].Nodes[0].Remove();
}

Please try adding the root nodes in the first page load only (!IsPostBack).

Greetings,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Andrew]

Actually the root nodes are added that way.
In fact you will notice that is in fact the opposite that is a problem. Lack of nodes.
Let me start again:

Here is the OnLoad function:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadRootNodes(catTreeView, TreeNodeExpandMode.ServerSide);
            message1.Message += "IsNotPostback";
        }
        else
            message1.Message += "IsPostBack";
    }

private void LoadRootNodes(RadTreeView treeView, TreeNodeExpandMode expandMode)
    {
        FillNodeCollection(treeView.Nodes, "00000000-0000-0000-0000-000000000000", expandMode);
    }

Here is the node expand:

protected void NodeExpand(object sender, RadTreeNodeEventArgs e)
    {
        if (e.Node.Nodes.Count == 0)
            PopulateNodeOnDemand(e, TreeNodeExpandMode.ServerSide);
    }

private void PopulateNodeOnDemand(RadTreeNodeEventArgs e, TreeNodeExpandMode expandMode)
    {
        FillNodeCollection(e.Node.Nodes, e.Node.Value, expandMode);
        e.Node.Expanded = true;
    }

Here is the method that loads the actual items into the node collection as used for both root and non root nodes:

    private void FillNodeCollection(RadTreeNodeCollection nodes, string parentId, TreeNodeExpandMode expandMode)
    {
        var db = new Clubs.ClubsDataClassesDataContext();

        var categories = from cat in db.Categories
                         join clubs in db.Clubs
                         on cat.Id equals clubs.CategoryId into ccc
                         join catChild in db.Categories
                         on cat.Id equals catChild.ParentId into c
                         where
                            (cat.ParentId == null && parentId == "00000000-0000-0000-0000-000000000000")
                         ||
                            (cat.ParentId == (Guid)SqlGuid.Parse(parentId) && parentId != "00000000-0000-0000-0000-000000000000")
                         select new
                         {
                             Id = cat.Id,
                             Name = cat.Name,
                             ParentId = cat.ParentId,
                             CategoryCount = ccc.Count(),
                             ChildCount = c.Count()
                         };

        foreach (var category in categories)
        {
            RadTreeNode node = new RadTreeNode();
            node.Text = category.Name;
            node.Value = category.Id.ToString();
            if (category.ChildCount > 0)
                node.ExpandMode = expandMode;

            nodes.Add(node);

            SetNodeControlDetails(node, category.Name, category.CategoryCount.ToString());
        }
    }

Here is the delete functionality:

protected void uxDeleteCategory_Click(object sender, EventArgs e)
    {
        LinkButton thisButton = (LinkButton)sender;
        RadTreeNode thisNode = (RadTreeNode)thisButton.Parent;
        int usedTimes = int.Parse(((Label)thisNode.FindControl("itemsCount")).Text);

        if (thisNode.Nodes.Count == 0 && usedTimes == 0)
        {
            DeleteCategory(thisNode.Value);
            thisNode.Remove();
        }
        else
            message1.Message = "Cannot delete this item!";

    }

protected void DeleteCategory(string NodeValue)
    {
        var db = new Clubs.ClubsDataClassesDataContext();
        var category = (from c in db.Categories where c.Id == (Guid)SqlGuid.Parse(NodeValue) select c).Single();

        db.Categories.DeleteOnSubmit(category);

        db.SubmitChanges();
    }

And the delete Button:

<asp:LinkButton OnClientClick="return blockConfirm('Are you sure you want to delete this?', event, 330, 100,'','Delete Category');"
                        ID="deleteCategoryButton" OnClick="uxDeleteCategory_Click" runat="server" Text='<%$Resources:Delete %>'></asp:LinkButton>

As you can see in this case the expand mode is set to server side and that works fine. But as soon as i change it to serversidecallback, it's stops working. What happens is that when i click the delete button it does a post back and all the items that were retrieved during the node expand just disapear. If i remove all the functionality from teh delete button and just let it run. I can see on the screen all the nodes still exist in the treeview but are empty. ie. no details in them. Perhaps it has something to do with how i insert the details into the treeview. I use a node template to allow for having buttons on each node.

Here is the wholre treeview:

<telerik:RadTreeView ID="catTreeView" runat="server" EnableEmbeddedSkins="False"
            CollapseAnimation-Type="None" ExpandAnimation-Type="None" Skin="HierarchyCategories"
            DataFieldID="Id" DataFieldParentID="ParentId" DataTextField="Name" DataValueField="Id"
            OnNodeExpand="NodeExpand">
            <CollapseAnimation Type="None" />
            <ExpandAnimation Type="None" />
            <NodeTemplate>
                <asp:Label ID="categoryNameButton" runat="server" CssClass="categoryTitle" />
                <asp:Label ID="itemsCount" runat="server" CssClass="categoryItemCount" />
                <div class="categoryAddNewCategory">
                    <div runat="server" id="subcategoryPopup" class="editItemPropertiesForm addNewCategory"
                        style="display: none">
                        <asp:Label ID="Label77" runat="server" Text='<%$Resources:SubcategoryName %>' AssociatedControlID="subcategoryName"></asp:Label>
                        <asp:TextBox ID="subcategoryName" runat="server" ValidationGroup="subcategory" CssClass="txt"
                            ></asp:TextBox>
                        <p class="button_area">
                            <asp:LinkButton ID="btnSubmitSubcategory" runat="server" ValidationGroup="subcategory"
                                CssClass="CmsButLeft okdark" CausesValidation="True" OnClick="uxAddSub_Click">
                                <asp:Literal ID="Literal66" runat="server" Text='<%$Resources:AddSubcategory %>'></asp:Literal></asp:LinkButton>
                            <span class="cmsorlbl">
                                <asp:Literal ID="Literal44" runat="server" Text="<%$Resources:Or %>"></asp:Literal></span>
                            <asp:LinkButton href="#" runat="server" ID="uxAddHide" CssClass="min">
                                <asp:Literal ID="Literal5" runat="server" Text="<%$Resources:Close %>"></asp:Literal>
                            </asp:LinkButton>
                        </p>
                    </div>
                    <asp:LinkButton href="#" runat="server" ID="uxAddShow" CssClass="addCategoryName">
                        Add a subcategory</asp:LinkButton>
                </div>
                <div class="categoryEditCategory">
                    <div runat="server" id="renamePopup" class="editItemPropertiesForm" style="display: none">
                        <div class="multiplePropertyEdit">
                            <strong class="multiplePropertyTitle">
                                <asp:Literal ID="Label1" runat="server" Text='<%$Resources:EditThisCategory %>'></asp:Literal></strong>
                            <asp:Label ID="Label2" runat="server" Text='<%$Resources:CategoryName %>' AssociatedControlID="categoryName"></asp:Label>
                            <asp:TextBox ID="categoryName" runat="server" ValidationGroup="categoryRename" CssClass="txt"
                                ></asp:TextBox>
                            <strong>
                                <asp:Literal ID="Literal7" runat="server" Text="<%$Resources:CategoryNameEmpty %>"></asp:Literal></strong>
                        </div>
                        <p class="button_area">
                            <asp:LinkButton ID="btnSubmitRename" runat="server" ValidationGroup="categoryRename"
                                OnClick="uxEditName_Click" CssClass="CmsButLeft okdark">
                                <asp:Literal ID="Literal6" runat="server" Text='<%$Resources:Update %>'></asp:Literal></asp:LinkButton>
                            <span class="cmsorlbl">
                                <asp:Literal ID="Literal4" runat="server" Text="<%$Resources:Or %>"></asp:Literal></span>
                            <asp:LinkButton href="#" runat="server" ID="uxRenameHide" CssClass="min">
                                <asp:Literal ID="Literal3" runat="server" Text="<%$Resources:Close %>"></asp:Literal>
                            </asp:LinkButton>
                        </p>
                    </div>
                    <asp:LinkButton href="#" runat="server" ID="uxRenameShow" CssClass="renameCategoryName">
                        <asp:Literal ID="Literal2" runat="server" Text="<%$Resources:Edit %>" /></asp:LinkButton>
                </div>
                <div class="categoryDeleteCategory">
                    <asp:LinkButton OnClientClick="return blockConfirm('Are you sure you want to delete this?', event, 330, 100,'','Delete Category');"
                        ID="deleteCategoryButton" OnClick="uxDeleteCategory_Click" runat="server" Text='<%$Resources:Delete %>'></asp:LinkButton>
                </div>
            </NodeTemplate>
        </telerik:RadTreeView>

 

[Andrew]

*bump*

Any ideas on this?

[Vesko]

This is might not be possible since you have Templates and load on demand. You should recreate the templates on every postback. Wrap the treeview in RadAjaxPanel (or use RadAjaxManager) and leave the expand mode to ServerSide.

You can also check these two posts on a similar subject:

http://www.telerik.com/community/forums/aspnet-ajax/treeview/dynamically-add-nodetemplate.aspx

http://www.telerik.com/community/forums/aspnet-ajax/treeview/ondemand-load-nodes-with-hierarchicaldatasource.aspx


Please see Albert's posts.