[Solved] RadTreeView is not wroking inside the Updatepanel

[Pravallika]

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

[Shinu]

Hi Pravallika,

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.

[Pravallika]

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>

[Shinu]

Hi Pravallika,

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.

[Pravallika]

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

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;
        }
    }
}

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

[Boyan Dimitrov]

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

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

 

 

[Pravallika]

Hai Boyan Dimitrov,

thanks for reply i tried like what you said then also its not working its returning false only

[Boyan Dimitrov]

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

<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