Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Expand/Collapse button not working when running in VS2010

1 Answer 78 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Maryna
Top achievements
Rank 1
Maryna asked on 28 Mar 2011, 02:55 PM
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);
         }
     }
 } 
}

 

1 Answer, 1 is accepted

Sort by
0
Helen
Telerik team
answered on 31 Mar 2011, 05:17 PM
TreeviewExpandCollapse.zip
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
Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
Tags
TreeView
Asked by
Maryna
Top achievements
Rank 1
Answers by
Helen
Telerik team
Share this question
or