AllowNodeEditing and AJAX updates question

8 posts, 0 answers
  1. Denis
    Denis avatar
    18 posts
    Member since:
    Feb 2009

    Posted 11 Feb 2011 Link to this post

    Hi There,

    I have classic layout: treeview on the left and content view on the right.
    In RadAjaxManager, content view update depends on treeview update
    <telerik:AjaxSetting AjaxControlID="RadCategoriesTreeView">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="TextItemPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
            <telerik:AjaxUpdatedControl ControlID="RadCategoriesTreeView" LoadingPanelID="RadAjaxLoadingPanel1" />
        </UpdatedControls>
    </telerik:AjaxSetting>

    Pretty much simple. The only problem: after tree node is edited content view is upated as well. I don't want that. I want content view being refreshed only when other node is selected. If node is edited I just want treeview to update.

    Please let me know if it possible to achieve.

    Thanks!
    Denis.
  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 16 Feb 2011 Link to this post

    Hello Denis,

    Yes, this could be achieved by partial ajaxification shown in this demo. In your case you can subscribe to OnNodeClick and set AjaxSetting in the handler similar to the demo:

    RadAjaxManager1.AjaxSettings.AddAjaxSetting(ibtnAddToCart, RadGrid2); //ajaxify the button

    Regards,
    Veronica Milcheva
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. Denis
    Denis avatar
    18 posts
    Member since:
    Feb 2009

    Posted 23 Feb 2011 Link to this post

    Veronica, thank you for response.

    I tried to Ajaxify only RadTreeNode as you suggested.
    I tried to do it on NodeClick and NodeCreated events and no luck:
    protected void RadCategoriesTreeView_NodeClick(object sender, RadTreeNodeEventArgs e)
    {
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(e.Node, TextItemPanel, RadAjaxLoadingPanel1);       
    }
    TextItemPanel is Ajaxified to itself.

    Also I found other topic that says that it is not possible to Ajaxify RadTreeNode:
    http://www.telerik.com/community/forums/aspnet-ajax/treeview/how-to-ajaxify-one-treeview-node.aspx

    Please advice!
    Thanks,
    Denis.
  4. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 01 Mar 2011 Link to this post

    Hello Denis,

    I've created a sample project to test your case. The problem is that even when you try to edit a node in the RadTreeView - the NodeClick event is fired and that causes the Panel to be ajaxified.

    Please take a look at the attached sample project and let me know if I miss something in your implementation.

    Greetings,
    Veronica Milcheva
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  5. Denis
    Denis avatar
    18 posts
    Member since:
    Feb 2009

    Posted 01 Mar 2011 Link to this post

    Hello Veronica,

    In your example following function never called because it is not hooked up to TreeView's OnNodeEdit event:
    protected void RadTreeView1_NodeEdit(object sender, RadTreeNodeEditEventArgs e)
    {
        RadTreeNode nodeEdited = e.Node;
        string newText = e.Text;
        nodeEdited.Text = newText;
    }
    In other words, in your example no Ajax partial update innitiated for TreeView on NodeEdit operation.
    I need this. In case of NodeEdit or NodeDrop (or other operation that doesn't change selected node) there should be Ajax request initiated for TreeView and some server side function should to be executed in order to update domain objects.
    Although for NodeClick event TextItemPanel needs to be updated as well. Because new node is selected and panel needs to be refreshed.
  6. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 07 Mar 2011 Link to this post

    Hi Denis,

    Could you please send me your project so I can inspect it and help you?

    Thank you!

    Best wishes,
    Veronica Milcheva
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  7. Denis
    Denis avatar
    18 posts
    Member since:
    Feb 2009

    Posted 07 Mar 2011 Link to this post

    Hi Veronica,

    I slightly modified your test project that you have sent to me.
    There are two parts: treeview and panel.
    • Each time treeview is updated it changes its color randomly (new color is assigned on the server side this is the requirement).
    • Each time panel is updated new counter value will be displayed.

    Now,
    when you select new node in the tree - both tree and panel are updated that is fine.
    when you edit or drop node - both parts are updated that is not fine. I need only tree to be updated in this case (tree's color).

    I can't attach project here so I post code in the message.

    <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true"
             Inherits="Telerik.Web.Examples.TreeView.ServerSideApi.DefaultCS" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head runat="server">
        <style type="text/css">
            .tree
            {float: left;}
            .panel1
            { border: 1px solid #000; float: left; width: 200px; height: 400px; margin-left: 20px; }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" />
                            <telerik:AjaxUpdatedControl ControlID="Panel3" />
                            <telerik:AjaxUpdatedControl ControlID="RadTreeView1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Windows7" />
     
            <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" OnNodeClick="RadTreeView1_NodeClick"
                OnNodeCollapse="RadTreeView1_NodeCollapse" OnNodeExpand="RadTreeView1_NodeExpand"
                OnNodeDrop="RadTreeView1_NodeDrop" AllowNodeEditing="true" OnNodeEdit="RadTreeView1_NodeEdit" CssClass="tree">
                <Nodes>
                    <telerik:RadTreeNode Text="Books" ExpandMode="ServerSide" Expanded="true">
                        <Nodes>
                            <telerik:RadTreeNode Text="Arts" />
                            <telerik:RadTreeNode Text="Biographies" />
                            <telerik:RadTreeNode Text="Children's Books" />
                            <telerik:RadTreeNode Text="Cooking" />
                            <telerik:RadTreeNode Text="History" />
                            <telerik:RadTreeNode Text="Fiction" />
                            <telerik:RadTreeNode Text="Mystery" />
                            <telerik:RadTreeNode Text="Nonfiction" />
                            <telerik:RadTreeNode Text="Romance" />
                            <telerik:RadTreeNode Text="Science Fiction " />
                            <telerik:RadTreeNode Text="Travel" />
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Music" ExpandMode="ServerSide">
                        <Nodes>
                            <telerik:RadTreeNode Text="Alternative" />
                            <telerik:RadTreeNode Text="Blues" />
                            <telerik:RadTreeNode Text="Children's Music" />
                            <telerik:RadTreeNode Text="Classical" />
                            <telerik:RadTreeNode Text="Country" />
                            <telerik:RadTreeNode Text="Dance" />
                            <telerik:RadTreeNode Text="Folk " />
                            <telerik:RadTreeNode Text="Hard Rock" />
                            <telerik:RadTreeNode Text="Jazz" />
                            <telerik:RadTreeNode Text="Soundtracks" />
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Movies" ExpandMode="ServerSide">
                        <Nodes>
                            <telerik:RadTreeNode Text="Action" />
                            <telerik:RadTreeNode Text="Animation" />
                            <telerik:RadTreeNode Text="Classics" />
                            <telerik:RadTreeNode Text="Comedy" />
                            <telerik:RadTreeNode Text="Documentary" />
                            <telerik:RadTreeNode Text="Drama" />
                            <telerik:RadTreeNode Text="Horror" />
                            <telerik:RadTreeNode Text="Musicals" />
                            <telerik:RadTreeNode Text="Mystery" />
                            <telerik:RadTreeNode Text="Westerns" />
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Software" ExpandMode="ServerSide">
                        <Nodes>
                            <telerik:RadTreeNode Text="Database" />
                            <telerik:RadTreeNode Text="Networking" />
                            <telerik:RadTreeNode Text="Presentation" />
                            <telerik:RadTreeNode Text="Project Management" />
                            <telerik:RadTreeNode Text="Reports" />
                            <telerik:RadTreeNode Text="Spreadsheet" />
                            <telerik:RadTreeNode Text="Word Processing" />
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeView>
     
            <asp:Panel runat="server" ID="Panel1" CssClass="panel1">
                This panel should be updated only when new node is selected. If NodeEdit or DragDrop operations performed this node should not be updated (in this case counter value will stay the same).<br /><br />
                Updates counter: <asp:Label runat="server" ID="Label2" Text='<%# GetCounter %>'></asp:Label> <br /><br />
                <asp:Label runat="server" ID="Label1"></asp:Label>
            </asp:Panel>
        </form>
    </body>
    </html>

    server side:
    using System;
    using Telerik.Web.UI;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Drawing;
     
     
    namespace Telerik.Web.Examples.TreeView.ServerSideApi
    {
        public partial class DefaultCS : System.Web.UI.Page
        {
            static int counter = 0;
            protected void Page_Load(object sender, EventArgs e)
            {
                random = new Random();
                counter++;
                RadTreeView1.ForeColor = GetRandomColor();
                Panel1.DataBind();
                RadTreeView1.DataBind();
            }
     
            private Random random;
     
            private Color GetRandomColor()
            {
                return Color.FromArgb(random.Next(0, 255), random.Next(0, 255), random.Next(0, 255));
            }
     
     
            protected string GetCounter
            {
                get
                {
                    return counter.ToString();
                }
            }
     
            protected void RadTreeView1_NodeClick(object sender, RadTreeNodeEventArgs e)
            {
                Label1.Text = "NodeClick: " + e.Node.Text;
            }
     
            protected void RadTreeView1_NodeCollapse(object sender, RadTreeNodeEventArgs e)
            {
                Label1.Text = "NodeCollapse: " + e.Node.Text;
            }
     
            protected void RadTreeView1_NodeExpand(object sender, RadTreeNodeEventArgs e)
            {
                Label1.Text = "NodeExpand: " + e.Node.Text;
            }
     
            protected void RadTreeView1_NodeDrop(object sender, RadTreeNodeDragDropEventArgs e)
            {
                Label1.Text = "NodeDrop: " + e.SourceDragNode.Text + " to " + e.DestDragNode.Text;
            }
     
            protected void RadTreeView1_NodeEdit(object sender, RadTreeNodeEditEventArgs e)
            {
            }
        }
    }


    should I open support ticket?
  8. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 10 Mar 2011 Link to this post

    Hello Denis,

    Yes, could you please open a new Support thread and attach your project in a .zip file?

    Thank you!

    Greetings,
    Veronica Milcheva
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top