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

Teleric Asp.net ajax treeview issue

2 Answers 126 Views

General Discussions

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

ankammarao asked on 20 Dec 2010, 07:13 PM

Hi,

I have developed my requirement using the asp.net ajax (teleric) triew view for drag and drop functionality over the datagrids, everything is working fine in my development machine, but it was not working at assembly environment where we have only framework4.0.(no visual studio)

Triewview drag and drop is not working, below is my aspx design

Can any one provide the solution for the same.

@ Page Language="C#" AutoEventWireup="true" CodeBehind="OverrideEmailAddresses.aspx.cs" Inherits="CTLS.iLien.Web.OverrideEmailAddresses" enableEventValidation="false" %>

@ 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 id="Head1" runat="server">

span.label

{

color:Black;

font-family:Arial;

font-weight:bold;

font-size:8pt;

padding: 4px 4px;

display: block;

margin-bottom: 7px;

}

#ConfigurationPanel1 ul

{

list-style: none;

margin: 0;

padding: 0;

float: left;

}

#ConfigurationPanel1 li

{

float: left;

padding: 0 10px;

border-left: solid 1px #b1d8eb;

line-height: 24px;

}

#ConfigurationPanel1 li input, #ConfigurationPanel1 li label, #ConfigurationPanel1 li span

{

vertical-align: middle;

}

.cssButton

{

background: url("../Common/Images/Add.gif") !important;

margin-left: 7px !important;

height: 22px !important;

width: 65px !important;

}

.cssScroll

{

background: url("../Images/delete.gif");

}

td.filing_grfbar

{

font-family: Arial;

font-size: 9pt;

font-weight: bold;

color: #FFFFFF;

height: 28px;

text-decoration: none;

background-color: #0076CD;

filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#0076CD', startColorstr='#51B4FD', gradientType='0');

}

FONT.style7

{

font-family: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;

color: White;

font-size: 10pt;

}

Panel.Margin

{

font-family:Arial;

margin-top:20px;

}

.ContentsLeftEndCap

{

background-image:url('../images/ContentEdgeLeft.gif');

background-repeat:repeat-y;

width: 232px;

}

.ContentsRightEndCap

{

background-image:url('../images/ContentEdgeRight.gif');

background-repeat:repeat-y;

width: 232px;

}

td.grfbar

{

font-family: Arial;

font-size: 9pt;

font-weight: bold;

color: #FFFFFF;

text-decoration: none;

background-color: #0076CD;

filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#0076CD', startColorstr='#51B4FD', gradientType='0');

}

.style1

{

height: 150px;

}

.style2

{

width: 232px;

}

.style3

{

height: 15px;

}

.style4

{

height: 43px;

}

.style5

{

FONT-SIZE: 9pt;

color:Black;

/*COLOR: #cc6600;*/

FONT-FAMILY: Arial;

height: 30px;

}

.style6

{

height: 15px;

width: 232px;

}

.roundedBlockTopLeft

{

background-repeat: no-repeat;

width: 21px;

height: 36px;

background-image:url('../../Common/images/Order_results_topL1.gif');

}

.roundedBlockTopRight

{

background-repeat: no-repeat;

width: 21px;

height: 36px;

background-image:url('../../Common/images/Order_results_topR1.gif');

}

.roundedBlockTopCenter

{

height: 36px;

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

font-weight: bold;

color:#636469;

background:url(../../Common/images/Order_results_toptile1.gif) repeat-x;

}

</style>

head>

body class="BODY">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1">

</telerik:RadScriptManager>

<telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">

/* <![CDATA[

var gridId = "<%= RadGrid1.ClientID %>";

var grid2Id="<%= RadGrid3.ClientID %>";

function isMouseOverGrid(target)

{

parentNode = target;

while (parentNode != null)

{

if (parentNode.id == gridId)

{

return parentNode;

}

else if (parentNode.id == grid2Id)

{

return parentNode;

}

parentNode = parentNode.parentNode;

}

return null;

}

function onNodeDragging(sender, args)

{

var target = args.get_htmlElement();

if(!target) return;

if (target.tagName == "INPUT")

{

target.style.cursor =

"hand";

}

var grid = isMouseOverGrid(target)

if (grid)

{

grid.style.cursor =

"hand";

}

function dropOnHtmlElement(args)

{

if(droppedOnGrid(args))

return;

}

function droppedOnGrid(args)

{

var target = args.get_htmlElement();

while(target)

{

if(target.id == gridId || target.id ==grid2Id)

{

args.set_htmlElement(target);

return;

}

target = target.parentNode;

}

args.set_cancel(

true);

}

function clientSideEdit(sender, args)

{

var destinationNode = args.get_destNode();

if(destinationNode)

{

var firstTreeView = $find('RadTreeView1');

firstTreeView.trackChanges();

var sourceNodes = args.get_sourceNodes();

for (var i = 0; i < sourceNodes.length; i++)

{

var sourceNode = sourceNodes[i];

sourceNode.get_parent().get_nodes().remove(sourceNode);

if(args.get_dropPosition() == "over") destinationNode.get_nodes().add(sourceNode);

if(args.get_dropPosition() == "above") insertBefore(destinationNode, sourceNode);

if(args.get_dropPosition() == "below") insertAfter(destinationNode, sourceNode);

}

destinationNode.set_expanded(

true);

firstTreeView.commitChanges();

}

function insertBefore(destinationNode, sourceNode)

{

var destinationParent = destinationNode.get_parent();

var index = destinationParent.get_nodes().indexOf(destinationNode);

destinationParent.get_nodes().insert(index, sourceNode);

}

function insertAfter(destinationNode, sourceNode)

{

var destinationParent = destinationNode.get_parent();

var index = destinationParent.get_nodes().indexOf(destinationNode);

destinationParent.get_nodes().insert(index+1, sourceNode);

}

function onNodeDropping(sender, args)

{

var dest = args.get_destNode();

if (dest)

{

var clientSide = document.getElementById('ChbClientSide').checked;

if(clientSide)

{

clientSideEdit(sender, args);

args.set_cancel(

true);

return;

}

dropOnTree(args);

}

else

{

dropOnHtmlElement(args);

}

/* ]]> */

function checkUCCEmail(sender,args)

{

var obj=document.getElementById('RadMaskedTextBox1');

var re = new RegExp(/(^[a-z]([a-z_0-9\.]*)@[a-z0-9]([a-z_\-0-9\.]*)([.][a-z]{2,3})$)/i);

if(obj.value != "")

{

if (!re.test(obj.value)) {

alert(

"Please enter valid email address!");

return false;

};

var radTextBox = sender;

sender.raisePostBackEvent();

}

function checkBEEmail(sender,args)

{

var obj=document.getElementById('RadTextBox2');

var re = new RegExp(/(^[a-z]([a-z_0-9\.]*)@[a-z0-9]([a-z_\-0-9\.]*)([.][a-z]{2,3})$)/i);

if(obj.value != "")

{

if (!re.test(obj.value)) {

alert(

"Please enter valid email address!");

return false;

};

var radTextBox = sender;

sender.raisePostBackEvent();

}

</script>

</telerik:RadScriptBlock>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

</telerik:RadWindowManager>

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">

<telerik:AjaxSetting AjaxControlID="btnSave">

<telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />

</UpdatedControls>

</telerik:AjaxSetting>

--<telerik:AjaxSetting AjaxControlID="RadTreeView1">

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadTreeView1">

<telerik:AjaxUpdatedControl ControlID="RadGrid3" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting> --

</AjaxSettings>

</telerik:RadAjaxManager>

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

<tr>

To override e-mail notifications,drag and drop organizational users to each receipient

list. You can also add external email addresses using the box provided above each

list.

</td>

</tr>

<tr>

<tr>

<td align="left" class="grfbar"><b><font class="style7">Organizational Users</font></b></td>

</tr>

</table>

</td>

</tr>

<tr>

<telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="True" OnNodeDrop="RadTreeView1_HandleDrop"

OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" MultipleSelect="True" Height="500px"

EnableDragAndDropBetweenNodes="True" ShowLineImages="false" > <%--Skin="Windows7"--%>

<Nodes>

</Nodes>

</telerik:RadTreeView>

</td>

<tr>

<td >

</td>

<td class="filing_grfbar" valign="middle" style="height: 20px" align="left"><b><font class="style7">UCC Debtor Alert Receipients</font></b></td>

</tr>

</table>

</td>

</tr>

<tr >

<td>

</td>

<td>

<table>

<tr>

<td>

<table>

<tr>

<tr>

<td class="roundedBlockTopCenter" style="width:180px;text-align:left">Email</td>

<td class="roundedBlockTopCenter" style="text-align:right; width:105px;">Remove</td>

</tr>

</table>

</td>

</tr>

<tr>

<telerik:RadGrid runat="server" ID="RadGrid1" AutoGenerateColumns="False" GridLines="None"

Skin="Windows7" OnDeleteCommand="onDeleteUccDebtor" ShowHeader="false"

Height="100%" Width="99%" >

</ClientSettings>

<telerik:GridBoundColumn DataField="UserName" HeaderText="User" UniqueName="User" ItemStyle-Wrap="true" ItemStyle-Width="35%" ItemStyle-HorizontalAlign="Left">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Email" HeaderText="Email" UniqueName="Email" ItemStyle-Wrap="true" ItemStyle-Width="55%"

ItemStyle-HorizontalAlign="Left">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="UserNumber" HeaderText="" UniqueName="UserNo" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn UniqueName="Remove" ImageUrl="../Common/Images/delete.gif" ButtonType="ImageButton"

ItemStyle-Width="10%" CommandName="Delete" HeaderText="Remove">

</telerik:GridButtonColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</td>

</tr>

<tr>

<asp:Label class="label" Text="Additional Email Address" runat="server" ID="Label1"></asp:Label>

</td>

<telerik:RadTextBox ID="RadMaskedTextBox1" runat="server" Skin="Windows7" MaxLength="250"

Wrap="true" Width="270px" ButtonsPosition="Right" ShowButton="true" OnTextChanged="btnAddUCC_Click"

ButtonCssClass="cssButton">

</telerik:RadTextBox>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td >

</td>

<td class="filing_grfbar" valign="middle" style="height: 20px" align="left"><b><font class="style7">Business Entity Alert Receipients</font></b></td>

</tr>

</table>

</td>

</tr>

<tr >

<td>

</td>

<tr>

<td>

<tr>

<tr>

<td class="roundedBlockTopCenter" style="width:180px;text-align:left">Email</td>

<td class="roundedBlockTopCenter" style="text-align:right; width:105px;">Remove</td>

</tr>

</table>

</td>

</tr>

<tr>

<telerik:RadGrid runat="server" ID="RadGrid3" AutoGenerateColumns="False" GridLines="None"

Skin="Windows7" Height="100%" Width="99%" OnDeleteCommand="onDeleteBusinessEntity" ShowHeader="false">

</ClientSettings>

<telerik:GridBoundColumn DataField="UserName" HeaderText="User" ItemStyle-Width="35%" UniqueName="User">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Email" HeaderText="Email" ItemStyle-Width="55%" UniqueName="Email">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="UserNumber" HeaderText="" UniqueName="UserNo" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn UniqueName="Remove" ImageUrl="../Common/Images/delete.gif" ButtonType="ImageButton"

CommandName="Delete" ItemStyle-Width="10%" HeaderStyle-Width="10%" HeaderText="Remove">

</telerik:GridButtonColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</td>

</tr>

<tr>

<asp:Label class="label" Text="Additional Email Address" runat="server" ID="Label2" ></asp:Label></td>

<td>

<telerik:RadTextBox ID="RadTextBox2" runat="server" Skin="Windows7" MaxLength="250" Wrap="true" Width="270px"

ButtonsPosition="Right" ShowButton="true" ButtonCssClass="cssButton" OnTextChanged="btnAddBE_Click"><ClientEvents OnButtonClick="checkBEEmail" /></telerik:RadTextBox>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<asp:ImageButton ID="btnSave" runat="server" OnClick="btnSaveClick"/>

<asp:ImageButton ID="btnCancel" runat="server" Text="Cancel" OnClientClick="window.close()" />

</td>

</tr>

</table>

</form>

body>

html>

2 Answers, 1 is accepted

answered on 21 Dec 2010, 11:29 AM

All my styles are not loading properly,I Have tried below settings in web.config under appsettings settings section

<add key="Telerik.EnableEmbeddedSkins" value="true"/>
<add key="Telerik.EnableEmbeddedBaseStylesheet" value="true"/>
<add key="Telerik.EnableEmbeddedScripts" value="true"/>

with this treeview is loading properly , and i am able to drag and drop the tree view over datagrids in my dev machine, but its not loading in my deployment server, I have only dot net framework installed in server, no visual studio

can any one suggest any ideas, how to provide treeviw drag and drop functionality with my applied style settings and javascripes