RadTreeView is not wroking inside the Updatepanel

8 posts, 0 answers
  1. Pravallika
    Pravallika avatar
    30 posts
    Member since:
    Mar 2014

    Posted 22 May 2014 Link to this post

    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
  2.
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 May 2014 in reply to Pravallika Link to this post

    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.
  5. Pravallika
    Pravallika avatar
    30 posts
    Member since:
    Mar 2014

    Posted 22 May 2014 in reply to Shinu Link to this post

    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>
























  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 May 2014 in reply to Pravallika Link to this post

    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.
  8.
  9. Pravallika
    Pravallika avatar
    30 posts
    Member since:
    Mar 2014

    Posted 23 May 2014 in reply to Shinu Link to this post

    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

  11. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 27 May 2014 Link to this post

    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
     

    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.

     
  13. Pravallika
    Pravallika avatar
    30 posts
    Member since:
    Mar 2014

    Posted 27 May 2014 in reply to Boyan Dimitrov Link to this post


    Hai Boyan Dimitrov,

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


  14.
  15. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 30 May 2014 Link to this post

    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
     

    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.

     
Back to Top