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

Expand/Collapse button not working when running in VS2010

1 Answer 117 Views

TreeView

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

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

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

<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

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!