Expand/Collapse button not working when running in VS2010

2 posts, 0 answers
  1. Maryna
    Maryna avatar
    2 posts
    Member since:
    Oct 2010

    Posted 28 Mar 2011 Link to this post

    Hi, i am facing really weird problem.  When i am trying to preview page from Visual Studio 2010 in debug/ or just view in browser mode
     i am not able  to fire events of expand/collapse button, cursor also is not changing when  moved over button.  Double clik on node- works fine. However when i deploy page o server and run it from server  in the same browser,  +/- bnutton works, as well as cursor is changing. 
    Here is simple code of the page 
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="treeviewnew.aspx.cs" Inherits="treeviewnew" %>
      
      
    <%@ 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></head>
    <body class="BODY">
     <form runat="server" id="mainForm" method="post">
     <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
     </telerik:RadScriptManager>
       
     <script type="text/javascript">
         //<!--
         function onClientContextMenuShowing(sender, args) {
             var treeNode = args.get_node();
             treeNode.set_selected(true);
             //enable/disable menu items
             setMenuItemsState(args.get_menu().get_items(), treeNode);
         }
      
         function onClientContextMenuItemClicking(sender, args) {
             var menuItem = args.get_menuItem();
             var treeNode = args.get_node();
             menuItem.get_menu().hide();
      
             switch (menuItem.get_value()) {
                 case "New":
                     break;
                 case "Edit":
                     treeNode.startEdit();
                     break;
                   
                    case "Delete":
                     var result = confirm("Are you sure you want to delete the item: " + treeNode.get_text());
                     args.set_cancel(!result);
                     break;
             }
         }
      
         //this method disables the appropriate context menu items
         function setMenuItemsState(menuItems, treeNode) {
             for (var i = 0; i < menuItems.get_count(); i++) {
                 var menuItem = menuItems.getItem(i);
                 switch (menuItem.get_value()) {
                     case "New":
                         formatMenuItem(menuItem, treeNode, 'New ');
                         break;
                     case "Edit":
                         formatMenuItem(menuItem, treeNode, 'Edit "{0}"');
                         break;
                     case "Delete":
                         formatMenuItem(menuItem, treeNode, 'Delete "{0}"');
                         break;
                     
                 }
             }
         }
      
         //formats the Text of the menu item
         function formatMenuItem(menuItem, treeNode, formatString) {
             var nodeValue = treeNode.get_value();
             if (nodeValue && nodeValue.indexOf("_Private_") == 0) {
                 menuItem.set_enabled(false);
             }
             else {
                 menuItem.set_enabled(true);
             }
             var newText = String.format(formatString, extractTitleWithoutMails(treeNode));
             menuItem.set_text(newText);
         }
      
         //checks if the text contains (digit)
         function hasNodeMails(treeNode) {
             return treeNode.get_text().match(/\([\d]+\)/ig);
         }
      
         //removes the brackets with the numbers,e.g. Inbox (30)
         function extractTitleWithoutMails(treeNode) {
             return treeNode.get_text().replace(/\s*\([\d]+\)\s*/ig, "");
         }
         //-->
     </script>
      
      
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
     </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
     <telerik:RadTreeView ID="RadTreeView1" runat="server"   
     OnContextMenuItemClick="RadTreeView1_ContextMenuItemClick" OnClientContextMenuItemClicking="onClientContextMenuItemClicking"
     OnClientContextMenuShowing="onClientContextMenuShowing" 
             OnNodeEdit="RadTreeView1_NodeEdit" DataFieldID="id" 
             DataFieldParentID="parentid" DataSourceID="SqlDataSource1" 
             DataTextField="description" DataValueField="value" MaxDataBindDepth="4" Skin="WebBlue"
             >
    <ContextMenus>
     <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">
     <Items>
     <telerik:RadMenuItem Value="New" Text="New ..." >
     </telerik:RadMenuItem>
     <telerik:RadMenuItem Value="Edit" Text="Edit ..." >
     </telerik:RadMenuItem>
      <telerik:RadMenuItem Value="Delete" Text="Delete.." >
     </telerik:RadMenuItem>
     </Items>
     <CollapseAnimation Type="none" />
     </telerik:RadTreeViewContextMenu>
     <telerik:RadTreeViewContextMenu ID="EmptyFolderContextMenu" runat="server">
     <Items>
     <telerik:RadMenuItem Value="New" Text="New ">
     </telerik:RadMenuItem>
      
      
     </Items>
     <CollapseAnimation Type="none" />
     </telerik:RadTreeViewContextMenu>
     </ContextMenus>
      
     </telerik:RadTreeView>
     </telerik:RadAjaxPanel>
      
     <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
         ConnectionString="<%$ ConnectionStrings:ECMApp3 %>" SelectCommand="select distinct  isnull(state,'')+'state' as id, null as parentid, isnull(state,'no state')  as description, isnull(state,'')  as value from projects
      
    union all 
    select  cast(p.id as varchar(10))+'project' as id, isnull(p.state, '')+'state' as parentid , p.description, cast(p.id  as varchar(10)) from projects p 
      
    union all 
    select cast(l.id as varchar(10))+'location', cast(p.id as varchar(10))+'project', l.name ,cast( l.id as varchar(10)) from  locations l inner join projects p 
    on l.project_id=p.id
      
    union all
    select cast (b.id as varchar(10))+'building', cast(l.id as varchar(10))+'location', b.building_name, cast(b.id as varchar(10)) from  buildings b inner join locations l on
     b.location_id=l.id 
     --where l.id <2"></asp:SqlDataSource>
      
      
     </form>
    </body>
    </html>
      
      
      
      
    using System;
    using System.Collections;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.SessionState;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
      
    using Telerik.Web.UI;
    using System.Text.RegularExpressions;
      
      
    public partial class treeviewnew : System.Web.UI.Page
    {
       
      
     protected const string unreadPattern = @"\(\d+\)";
     protected void Page_Load(object sender, EventArgs e)
     {
         SqlDataSource1.DataBind();
         SqlDataSource1.Select(DataSourceSelectArguments.Empty);
         //RadTreeView2.DataBind();
     }
     protected void RadTreeView1_ContextMenuItemClick(object sender, RadTreeViewContextMenuEventArgs e)
     {
         RadTreeNode clickedNode = e.Node;
      
         switch (e.MenuItem.Value)
         {
             case "New":
                 RadTreeNode clonedNode = clickedNode.Clone();
                 clonedNode.Text = string.Format("Copy of {0}", clickedNode.Text);
                 clickedNode.InsertAfter(clonedNode);
                 //set node's value so we can find it in startNodeInEditMode
                 clonedNode.Value = clonedNode.GetFullPath("/");
                 clonedNode.Selected = true;
                 startNodeInEditMode(clonedNode.Value);
                 break;
              
             case "Delete":
                 clickedNode.Remove();
                 break;
         }
     }
      
     private void startNodeInEditMode(string nodeValue)
     {
         //find the node by its Value and edit it when page loads
         string js = "Sys.Application.add_load(editNode); function editNode(){ ";
         js += "var tree = $find(\"" + RadTreeView1.ClientID + "\");";
         js += "var node = tree.findNodeByValue('" + nodeValue + "');";
         js += "if (node) node.startEdit();";
         js += "Sys.Application.remove_load(editNode);};";
      
         RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "nodeEdit", js, true);
     }
      
     protected void RadTreeView1_NodeEdit(object sender, RadTreeNodeEditEventArgs e)
     {
         e.Node.Text = e.Text;
     }
      
     //this method is used by Mark All as Read and Empty this folder 
     protected void emptyFolder(RadTreeNode node, bool removeChildNodes)
     {
         node.Font.Bold = false;
         node.Text = Regex.Replace(node.Text, unreadPattern, "");
      
         if (removeChildNodes)
         {
             //Empty this folder is clicked
             for (int i = node.Nodes.Count - 1; i >= 0; i--)
             {
                 node.Nodes.RemoveAt(i);
             }
         }
         else
         {
             //Mark all as read is clicked
             foreach (RadTreeNode child in node.Nodes)
             {
                 emptyFolder(child, removeChildNodes);
             }
         }
     
    }

     

  2. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 31 Mar 2011 Link to this post

    Hello Maryna,

    We tried to reproduce the problem, but without much success. Please refer to our test project for details.
    Does it work at your side?
    What might be the difference in your case?

    Could you please record a short video which demonstrates the behavior? You may use Jing for example. It is a free tool.

    All the best,
    Helen
    the Telerik team
Back to Top