This is a migrated thread and some comments may be shown as answers.

AllowNodeEditing and AJAX updates question

7 Answers 96 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Denis asked on 11 Feb 2011, 07:44 PM

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.

7 Answers, 1 is accepted

answered on 24 Feb 2011, 02:48 AM

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.

answered on 01 Mar 2011, 02:18 PM

TreeView.zip

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!

answered on 01 Mar 2011, 11:44 PM

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.

answered on 07 Mar 2011, 05:55 PM

Capture.PNG

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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?

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

AllowNodeEditing and AJAX updates question

7 Answers, 1 is accepted