Events not fired when TreeView referenced in RadAjaxManager

[Mark]

I have downloaded and tested the demo from here:

http://demos.telerik.com/aspnet-ajax/treeview/examples/programming/addremovedisable/defaultcs.aspx

This allows click events for adding and deleting nodes in a treeview, and for the treeview to be updated without screen flicker.

However, the demo code doesn't work for me.

For example, if I try to delete a node by clicking on the Delete Node button it doesn't even fire the DeleteButton_Click event.  If I remove the reference to the DeleteButton in the RadAjaxManager, then the event fires, but I then get the screen flicker when the tree is redrawn.

The code is below:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.User.master" EnableViewState="true" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" EnableViewState="true" ContentPlaceHolderID="MainContent" Runat="Server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
          <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="DisableButton">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1">
                         </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="EnableAllButton">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1">
                         </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="DeleteButton">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1">
                         </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="AddButton">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1">
                         </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
          </AjaxSettings>
     </telerik:RadAjaxManager>
     <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
     </telerik:RadAjaxLoadingPanel>

          <ul class="qsfexAvailableActions">
               <li>
                    <asp:Button ID="DisableButton" runat="server" OnClick="DisableButton_Click"
                         ValidationGroup="DisableRequiresSelection" Text="Disable selected node"></asp:Button>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Select a node first."
                         ControlToValidate="RadTreeView1" Display="Dynamic" ValidationGroup="DisableRequiresSelection"
                         CssClass="validator"></asp:RequiredFieldValidator>
               </li>
               <li>
                    <asp:Button ID="EnableAllButton" runat="server" CausesValidation="False"
                         OnClick="EnableAll_Button" Text="Enable all nodes"></asp:Button>
               </li>
               <li>
                    <asp:Button ID="DeleteButton" runat="server" OnClick="DeleteButton_Click"
                         ValidationGroup="DeleteRequiresSelection" Text="Delete selected node"></asp:Button>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Select a node first."
                         Display="Dynamic" ControlToValidate="RadTreeView1" ValidationGroup="DeleteRequiresSelection"
                         CssClass="validator"></asp:RequiredFieldValidator>
               </li>
               <li>
                    <telerik:RadTextBox runat="Server" ID="NodeTextBox" EmptyMessage="Enter node text">
                    </telerik:RadTextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Text is required"
                         Display="Dynamic" ControlToValidate="NodeTextBox" ValidationGroup="TextRequired"
                         CssClass="validator"></asp:RequiredFieldValidator>
               </li>
               <li>
                    <asp:Button ID="AddButton" runat="server" OnClick="AddButton_Click" Text="Add new node"></asp:Button>
               </li>
          </ul>

     <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="280px" Width="300px">
     </telerik:RadTreeView>

</asp:Content>

 

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

 

public partial class Test : System.Web.UI.Page

{

    private void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            RadTreeView1.LoadContentFile("tree.xml");

        }

    }

 

    protected void DisableButton_Click(object sender, EventArgs e)

    {

        Page.Validate("DisableRequiresSelection");

        if (Page.IsValid)

        {

            RadTreeView1.SelectedNode.Enabled = false;

            RadTreeView1.SelectedNode.Selected = false;

        }

    }

 

    protected void EnableAll_Button(object sender, EventArgs e)

    {

        foreach (RadTreeNode node in RadTreeView1.GetAllNodes())

        {

            node.Enabled = true;

        }

    }

 

    protected void DeleteButton_Click(object sender, EventArgs e)

    {

        Page.Validate("DeleteRequiresSelection");

        if (Page.IsValid)

        {

            RadTreeView1.SelectedNode.Remove();

        }

    }

 

    protected void AddButton_Click(object sender, EventArgs e)

    {

        Page.Validate("TextRequired");

        if (Page.IsValid)

        {

            IRadTreeNodeContainer target = RadTreeView1;

            if (RadTreeView1.SelectedNode != null)

            {

                RadTreeView1.SelectedNode.Expanded = true;

                target = RadTreeView1.SelectedNode;

            }

 

 

            RadTreeNode addedNode = new RadTreeNode(NodeTextBox.Text);

            addedNode.Selected = true;

            target.Nodes.Add(addedNode);

        }

    }

 

}


[Mark]

To simplify the testing of this issue, I have stripped the test code down to the basics:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" EnableViewState="true" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" EnableViewState="true" ContentPlaceHolderID="MainContent" Runat="Server">

    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

    <asp:Button ID="DeleteButton" runat="server" OnClick="DeleteButton_Click" Text="Delete selected node"></asp:Button>

     <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
          <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="DeleteButton">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1">
                         </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
          </AjaxSettings>
     </telerik:RadAjaxManager>

     <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
     </telerik:RadAjaxLoadingPanel>

     <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="280px" Width="300px">
     </telerik:RadTreeView>

</asp:Content>

and the code behind is:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class Test : System.Web.UI.Page
{
    private void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            RadTreeView1.LoadContentFile("tree.xml");
        }
    }

    protected void DeleteButton_Click(object sender, EventArgs e)
    {
        Page.Validate("DeleteRequiresSelection");
        if (Page.IsValid)
        {
            RadTreeView1.SelectedNode.Remove();
        }
    }
}

With the code as above, the deletebutton_click event never gets fired.

However if I remove the following code from the RadAjaxManager, then the click event gets fired, but it then causes a screen flicker on refresh:

<telerik:AjaxSetting AjaxControlID="DeleteButton">
     <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1">
          </telerik:AjaxUpdatedControl>
     </UpdatedControls>
</telerik:AjaxSetting>

ANY ideas?

[Kate]

Hello Mark,

When using master and content page it is recommended that you use the RadAjaxManagerProxy control instead of the RadAjaxManager control as fully explained here. Another approach would also be to us the RadAjaxPanel only on the content page and wrap the button and the treeview control.

Regards,
Kate
Telerik

[Mark]

That seems to help, however I now have the following scenario:

I have a tree in a div on the left
I have a grid in a div on the right

If I have the tree in a radpanel then the grid on the right doesn't draw.  My server side code does get called when the click occurs, so I know the click is happening.

I have also tried to put every control in the panel, however that then screws up the page layout as both the tree and the grid are in their own independent vertical scrolling divs.  When they are all in the one panel then I lose all ability for those divs to scroll vertically.

Any ideas?

Is there any best practice I should follow here for my specific scenario?

Best regards

Mark

[Mark]

Bump...

Anyone?

[Kate]

Hi Mark,

It seems that the scenario that you describe is very custom one and therefore we would need to inspect it locally. For this purpose I would suggest that you open an official support ticket where you can attach your simplified runnable project so I can run it and investigate the issue locally.

Regards,
Kate
Telerik