Pravallika
Top achievements
Rank 1
Pravallika
asked on 22 May 2014, 08:52 AM
In my aspx page is having RadGrid and RadWindow inside the update panel in Radwindow i have RadTreeview and Radeditor the radtreeview is not wroking properly when it is in the update panel before its wroking properly after inserting updatepanel only i am getting error how to solve is it RadTreeView will wrok in UpdatePanel are not
7 Answers, 1 is accepted
0
Shinu
Top achievements
Rank 2
answered on 22 May 2014, 11:54 AM
Hi Pravallika,
Please have a look into the sample code snippet which works fine at my end.
ASPX:
C#:
Please provide your code if it doesn't help.
Thanks,
Shinu.
Please have a look into the sample code snippet which works fine at my end.
ASPX:
<
asp:UpdatePanel
ID
=
"updatepnl"
runat
=
"server"
>
<
ContentTemplate
>
<
telerik:RadWindow
ID
=
"radwin"
runat
=
"server"
VisibleOnPageLoad
=
"true"
>
<
ContentTemplate
>
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
OnNodeClick
=
"RadTreeView1_NodeClick"
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"Node1"
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Node2"
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeView
>
</
ContentTemplate
>
</
telerik:RadWindow
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
C#:
protected
void
RadTreeView1_NodeClick(
object
sender, Telerik.Web.UI.RadTreeNodeEventArgs e)
{
RadTreeNode node =
new
RadTreeNode();
node.Text =
"SubNode1"
;
e.Node.Nodes.Add(node);
}
Please provide your code if it doesn't help.
Thanks,
Shinu.
0
Pravallika
Top achievements
Rank 1
answered on 22 May 2014, 12:31 PM
Hai Shinu,
My Code is like this its wroking properly before updatepanel after inserting updatepanel only i am getting error
while dragging and dropping
refer this following article based on this only i created
http://demos.telerik.com/aspnet-ajax/editor/examples/treeviewandeditor/defaultcs.aspx
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
var editor =$find("<%=RadEditor1.ClientID%>");
var tree = null;
function storeReferences() {
debugger;
editor = $find("<%=RadEditor1.ClientID%>");
tree = $find("<%=RadTreeView1.ClientID%>");
//makeUnselectable(tree.get_element());
Sys.Application.remove_load(storeReferences);
}
Sys.Application.add_load(storeReferences);
function Confirmation(sender, args) {
var res = confirm('Are you sure want to delete ?');
if (!res) {
//Cancel the postback
args.set_cancel(true);
}
}
function getelement()
{
debugger;
$find("<%= RadWinEmp_Add.ClientID %>").show();
editor = $find("<%=RadEditor1.ClientID%>");
tree = $find("<%=RadTreeView1.ClientID%>");
}
</script>
<asp:UpdatePanel ID="up1datepanel1" runat="server" >
<ContentTemplate>
<div>
<telerik:RadWindow ID="RadWinEmp_Add" runat="server" Width="900" Height="600" Modal="true"
Behaviors="Close,Reload" VisibleStatusbar="false">
<ContentTemplate>
<telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
<table>
<tr>
<td valign="top">
<telerik:RadTreeView ID="RadTreeView1" runat="server" Height="300px" Skin="" EnableDragAndDrop="True" OnClientNodeClicking="BeforeClick"
OnClientNodeDragStart="OnClientNodeDragStart" OnClientNodeDragging="OnClientNodeDragging"
OnClientNodeDropping="OnClientNodeDropping"
Width="200px" Enabled="true">
</telerik:RadTreeView>
</td>
<td>
<telerik:RadEditor ToolsFile="Tools.xml" ID="RadEditor1" runat="server" ForeColor="Black" > </telerik:RadEditor>
</td>
</tr>
</table>
<br />
<center>
<telerik:RadButton ID="rbtnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click"
AutoPostBack="True" ButtonType="LinkButton" >
</telerik:RadButton>
<telerik:RadButton ID="rbtnDelete" runat="server" Text="Cancel" OnClick="btnCancel_Click"
AutoPostBack="True" ButtonType="LinkButton" >
</telerik:RadButton>
</center>
</ContentTemplate>
</telerik:RadWindow>
<telerik:RadGrid id="rgSample" AllowPaging="True" PageSize="5" PagerStyle-Mode="Advanced" OnItemCommand="rgSample_ItemCommand"
AutoGenerateColumns="False" runat="server" Width="80%"
OnNeedDataSource="rgSample_NeedDataSource" CssClass="RadGridCustomClass" >
<MasterTableView DataKeyNames="Id" >
<Columns>
<telerik:GridBoundColumn DataField="Id" HeaderText="Id" HeaderStyle-CssClass="first" ItemStyle-CssClass="first">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Description" UniqueName="Description" HeaderStyle-CssClass="first" ItemStyle-CssClass="first" HeaderText="Description">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-Width="20%" HeaderStyle-HorizontalAlign="Center"
ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<telerik:RadButton ID="rbtnEdit" runat="server" OnClientClicking="getelement" Text="Edit" CommandArgument='<%#Eval("Description") %>' CommandName="RowEdit"
ButtonType="LinkButton" Width="20%">
</telerik:RadButton>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" ></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn AllowFiltering="false" UniqueName="InnerDelete" HeaderStyle-Width="20%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<telerik:RadButton ID="rbtnDelete" runat="server" CommandArgument='<%#Eval("Description") %>' Text="Delete" OnClientClicking="Confirmation" CommandName="RowDelete"
AutoPostBack="True" ButtonType="LinkButton" >
</telerik:RadButton>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<PagerStyle Mode="Advanced"></PagerStyle>
</telerik:RadGrid>
</ContentTemplate>
</asp:UpdatePanel>
</form>
My Code is like this its wroking properly before updatepanel after inserting updatepanel only i am getting error
while dragging and dropping
refer this following article based on this only i created
http://demos.telerik.com/aspnet-ajax/editor/examples/treeviewandeditor/defaultcs.aspx
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
var editor =$find("<%=RadEditor1.ClientID%>");
var tree = null;
function storeReferences() {
debugger;
editor = $find("<%=RadEditor1.ClientID%>");
tree = $find("<%=RadTreeView1.ClientID%>");
//makeUnselectable(tree.get_element());
Sys.Application.remove_load(storeReferences);
}
Sys.Application.add_load(storeReferences);
function Confirmation(sender, args) {
var res = confirm('Are you sure want to delete ?');
if (!res) {
//Cancel the postback
args.set_cancel(true);
}
}
function getelement()
{
debugger;
$find("<%= RadWinEmp_Add.ClientID %>").show();
editor = $find("<%=RadEditor1.ClientID%>");
tree = $find("<%=RadTreeView1.ClientID%>");
}
</script>
<asp:UpdatePanel ID="up1datepanel1" runat="server" >
<ContentTemplate>
<div>
<telerik:RadWindow ID="RadWinEmp_Add" runat="server" Width="900" Height="600" Modal="true"
Behaviors="Close,Reload" VisibleStatusbar="false">
<ContentTemplate>
<telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
<table>
<tr>
<td valign="top">
<telerik:RadTreeView ID="RadTreeView1" runat="server" Height="300px" Skin="" EnableDragAndDrop="True" OnClientNodeClicking="BeforeClick"
OnClientNodeDragStart="OnClientNodeDragStart" OnClientNodeDragging="OnClientNodeDragging"
OnClientNodeDropping="OnClientNodeDropping"
Width="200px" Enabled="true">
</telerik:RadTreeView>
</td>
<td>
<telerik:RadEditor ToolsFile="Tools.xml" ID="RadEditor1" runat="server" ForeColor="Black" > </telerik:RadEditor>
</td>
</tr>
</table>
<br />
<center>
<telerik:RadButton ID="rbtnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click"
AutoPostBack="True" ButtonType="LinkButton" >
</telerik:RadButton>
<telerik:RadButton ID="rbtnDelete" runat="server" Text="Cancel" OnClick="btnCancel_Click"
AutoPostBack="True" ButtonType="LinkButton" >
</telerik:RadButton>
</center>
</ContentTemplate>
</telerik:RadWindow>
<telerik:RadGrid id="rgSample" AllowPaging="True" PageSize="5" PagerStyle-Mode="Advanced" OnItemCommand="rgSample_ItemCommand"
AutoGenerateColumns="False" runat="server" Width="80%"
OnNeedDataSource="rgSample_NeedDataSource" CssClass="RadGridCustomClass" >
<MasterTableView DataKeyNames="Id" >
<Columns>
<telerik:GridBoundColumn DataField="Id" HeaderText="Id" HeaderStyle-CssClass="first" ItemStyle-CssClass="first">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Description" UniqueName="Description" HeaderStyle-CssClass="first" ItemStyle-CssClass="first" HeaderText="Description">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-Width="20%" HeaderStyle-HorizontalAlign="Center"
ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<telerik:RadButton ID="rbtnEdit" runat="server" OnClientClicking="getelement" Text="Edit" CommandArgument='<%#Eval("Description") %>' CommandName="RowEdit"
ButtonType="LinkButton" Width="20%">
</telerik:RadButton>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" ></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn AllowFiltering="false" UniqueName="InnerDelete" HeaderStyle-Width="20%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<telerik:RadButton ID="rbtnDelete" runat="server" CommandArgument='<%#Eval("Description") %>' Text="Delete" OnClientClicking="Confirmation" CommandName="RowDelete"
AutoPostBack="True" ButtonType="LinkButton" >
</telerik:RadButton>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<PagerStyle Mode="Advanced"></PagerStyle>
</telerik:RadGrid>
</ContentTemplate>
</asp:UpdatePanel>
</form>
0
Shinu
Top achievements
Rank 2
answered on 23 May 2014, 07:00 AM
Hi Pravallika,
Please try the below JavaScript code to access the RadTreeView and RadEditor inside the UpdatePanel which works fine at my end.
JavaScript:
Thanks,
Shinu.
Please try the below JavaScript code to access the RadTreeView and RadEditor inside the UpdatePanel which works fine at my end.
JavaScript:
var
editor = document.getElementById(
"<%=RadEditor1.ClientID%>"
);
var
tree = document.getElementById(
"<%=RadTreeView1.ClientID%>"
);
Thanks,
Shinu.
0
Pravallika
Top achievements
Rank 1
answered on 23 May 2014, 07:38 AM
Hai Shinu,
Thanks for reply
Like this also editor = $find("<%=RadEditor1.ClientID%>"); i am getting the values.Everything is wroking fine when i click on edit buttor Radwindow is opening but in my Radtreeview i have some images when do drag and drop that image its not coming once see my script.js code
In OnClientNodeDropping() we have var result = isMouseOverEditor(editor, event);
there in result i am getting false if it is true then only image will display in Radeditor but i am getting false
but in isMouseOverEditor() i am getting bothe editor and event but it is returning false why i cant understand
Thanks for reply
Like this also editor = $find("<%=RadEditor1.ClientID%>"); i am getting the values.Everything is wroking fine when i click on edit buttor Radwindow is opening but in my Radtreeview i have some images when do drag and drop that image its not coming once see my script.js code
function OnClientNodeDragStart() {
setOverlayVisible(true);
}
var editor1;
function OnClientNodeDropping(sender, args) {
var event = args.get_domEvent();
var result = isMouseOverEditor(editor, event);
if (result) {
var imageSrc = args.get_sourceNode().get_value();
if (imageSrc && (imageSrc.indexOf(".gif") != -1 || imageSrc.indexOf(".jpg") != -1)) {
var imageSrc = "<
img
src
=
'" + imageSrc + "'
>";
editor.setFocus();
editor.pasteHtml(imageSrc);
editor1 = editor;
}
}
setOverlayVisible(false);
}
function OnClientNodeDragging(sender, args) {
var event = args.get_domEvent();
if (shimId && shimId._backgroundElement) {
if (isMouseOverEditor(editor, event)) {
shimId._backgroundElement.style.cursor = "alias";
}
else {
shimId._backgroundElement.style.cursor = "no-drop";
}
}
}
/* ================== Utility methods needed for the Drag/Drop ===============================*/
//Make all treeview nodes unselectable to prevent selection in editor being lost
function makeUnselectable(element) {
var nodes = element.getElementsByTagName("*");
for (var index = 0; index <
nodes.length
; index++) {
var
elem
=
nodes
[index];
elem.setAttribute("unselectable", "on");
}
}
//Create and display an overlay to prevent the editor content area from capturing mouse events
var
shimId
=
null
;
function setOverlayVisible(toShow) {
if (!shimId) {
var
div
=
document
.createElement("DIV");
document.body.appendChild(div);
shimId
=
new
Telerik.Web.UI.ModalExtender(div);
}
if (toShow)
shimId.show();
else
shimId.hide();
}
//Check if the image is over the editor or not
function isMouseOverEditor(editor, event) {
if (($telerik.isMouseOverElementEx(editor.get_contentAreaElement(), event)) == true)
return true;
else
return false;
}
/* ================== These two methods are not related to the drag/drop functionality, but to the preview functionality =======*/
function Scale(img, width, height) {
var
hRatio
=
img
.height / height;
var
wRatio
=
img
.width / width;
if (img.width > width && img.height > height) {
var ratio = (hRatio >= wRatio ? hRatio : wRatio);
img.width = (img.width / ratio);
img.height = (img.height / ratio);
}
else {
if (img.width > width) {
img.width = (img.width / wRatio);
img.height = (img.height / wRatio);
}
else {
if (img.height > height) {
img.width = (img.width / hRatio);
img.height = (img.height / hRatio);
}
}
}
}
function BeforeClick(sender, args) {
var node = args.get_node();
var object = document.createElement("IMG");
object.src = node.get_value();
if (node.get_attributes().getAttribute("Category") == "Folder") {
return;
}
var previewPane = document.getElementById("previewPane");
if (object.complete) {
Scale(object, 100, 100);
previewPane.innerHTML = "";
previewPane.appendChild(object);
}
else {
previewPane.innerHTML = "Loading image...";
object.onload = function () {
Scale(object, 100, 100);
previewPane.innerHTML = "";
previewPane.appendChild(object);
object.onload = null;
}
}
}
there in result i am getting false if it is true then only image will display in Radeditor but i am getting false
but in isMouseOverEditor() i am getting bothe editor and event but it is returning false why i cant understand
0
Hello,
Please note that the RadEdtor client-side object get_contentAreaElement() method does not return the entire editor DOM container element. I would suggest using the get_element() instead of get_contentAreaElement() in your method implementation:
//JavaScript
Regards,
Boyan Dimitrov
Telerik
Please note that the RadEdtor client-side object get_contentAreaElement() method does not return the entire editor DOM container element. I would suggest using the get_element() instead of get_contentAreaElement() in your method implementation:
//JavaScript
//Check if the image is over the editor or not
function
isMouseOverEditor(editor, event) {
if
(($telerik.isMouseOverElementEx(editor.get_contentAreaElement(), event)) ==
true
)
return
true
;
else
return
false
;
}
Regards,
Boyan Dimitrov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Pravallika
Top achievements
Rank 1
answered on 27 May 2014, 09:00 AM
Hai Boyan Dimitrov,
thanks for reply i tried like what you said then also its not working its returning false only
0
Hello,
I am still not able to replicate the issue. Could you please try the following code and let us know how that worked.
//markup code
Regards,
Boyan Dimitrov
Telerik
I am still not able to replicate the issue. Could you please try the following code and let us know how that worked.
//markup code
<telerik:RadCodeBlock ID=
"RadCodeBlock1"
runat=
"server"
>
<script type=
"text/javascript"
>
function
OnClientNodeDropping(sender, args) {
var
editor = $find(
"<%=RadEditor1.ClientID%>"
);
var
event = args.get_domEvent();
var
result = isMouseOverEditor(editor, event);
alert(result);
}
function
isMouseOverEditor(editor, event) {
if
(($telerik.isMouseOverElementEx(editor.get_element(), event)) ==
true
)
return
true
;
else
return
false
;
}
</script>
</telerik:RadCodeBlock>
<telerik:RadTreeView ID=
"RadTreeView1"
runat=
"server"
EnableDragAndDrop=
"true"
OnClientNodeDropping=
"OnClientNodeDropping"
>
<Nodes>
<telerik:RadTreeNode Text=
"Node 1"
></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
<telerik:RadEditor ID=
"RadEditor1"
runat=
"server"
></telerik:RadEditor>
Regards,
Boyan Dimitrov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.