Deleting item when using TreeNodeExpandMode.ServerSideCallBack

5 posts, 0 answers
  1. Andrew
    Andrew avatar
    171 posts
    Member since:
    Jun 2009

    Posted 24 Aug 2009 Link to this post

    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

     

  2. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 25 Aug 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    171 posts
    Member since:
    Jun 2009

    Posted 25 Aug 2009 Link to this post

    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> 
                            <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> 
                            <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> 
     
  5. Andrew
    Andrew avatar
    171 posts
    Member since:
    Jun 2009

    Posted 27 Aug 2009 Link to this post

    *bump*

    Any ideas on this?
  6. Vesko
    Vesko avatar
    122 posts
    Member since:
    Mar 2009

    Posted 28 Aug 2009 Link to this post

    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.



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