Problem with Editer and Tree Present in Update Panel

7 posts, 0 answers
  1. Santosh
    Santosh avatar
    4 posts
    Member since:
    Nov 2012

    Posted 22 May 2014 Link to this post

    Hi,

    I am trying to solve this problem since 2days but unable to do.

    I am having a radgrid with edit link radbutton, when I click edit button then radwindow will open with rad tree containing some images from local folder and radeditor with data when I drag and drop the image from tree to editor java script error is coming. I have used update panel with radwindow  inside it. 

    function isMouseOverEditor(editor,event){


    return $telerik.isMouseOverElementEx(editor.get_contentAreaElement(),event)

    }




    I am getting the error inside the the above javascript. After lots of efforts I found that the above javascript is not getting the id of the rad editor
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 22 May 2014 Link to this post

    Hi Santosh,

    Please provide more details about the encountered issue.

    • Is this piece of code a customization?
    • How this affect the RadEditor control?
    • Can you provide the basic configuration related to the problematic behavior?
    • What browser and which version is used?

    It would be helpful if you can isolate the problem in a simple project only with the RadEditor control, so that I could reproduce and investigate this on my end.

    I can verify that the issue is related to the provided example for dragging and dropping images in the editor, but on my end I am unable to reproduce the issue. Any durther details on this matter will be helpful to find the reason for this problem.

    Regards,

    Ianko
    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Santosh
    Santosh avatar
    4 posts
    Member since:
    Nov 2012

    Posted 22 May 2014 Link to this post

    Hi Thanks for Reply.....

    There is no problem from browser.
    I am new to this forum I am unable to copy and paste the code, please let me know how to place code here. When I am pasting, Nothing is done in the editor.





























































































  5. Santosh
    Santosh avatar
    4 posts
    Member since:
    Nov 2012

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


    Hi, This Is my aspx code
     
     
     
     
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormUpdateDb.aspx.cs" Inherits="RadEditor.WebFormUpdateDb" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <script src="Scripts/ScriptRadEdtor.js"></script>
    </head>
    <body>
        <script src="Scripts/scripts.js" type="text/javascript"></script>
        <%-- <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Name="RadEditor.MyFile.js"  Path="/Scripts/MyFile.js" />
            </Scripts>
        </telerik:RadScriptManager>--%>
        <%-- <asp:HiddenField ID="hdnedtr" runat="server" Value="rdEdtr"/>--%>
     
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
     
     
                <asp:Label ID="lbledtr" runat="server" Text="rdEdtr"></asp:Label>
                <asp:Label ID="lbltree" runat="server" Text="rdTreeView"></asp:Label>
     
                <asp:UpdatePanel ID="updtWindpw" runat="server">
                    <ContentTemplate>
     
                        <telerik:RadWindow ID="RadWinEmp_Add" runat="server" Width="900" Height="600" Modal="true" VisibleOnPageLoad="false" Visible="false"
                            Behaviors="Close,Reload" VisibleStatusbar="false">
                            <ContentTemplate>
                                <table>
                                    <tr>
                                        <td valign="top" style="width: 300px;" class="module">
     
                                            <telerik:RadTreeView ID="rdTreeView" runat="server" Height="300px" EnableDragAndDrop="True" OnClientNodeClicking="BeforeClick"
                                                OnClientNodeDragStart="OnClientNodeDragStart" OnClientNodeDragging="OnClientNodeDragging" EnableClientScripts="false"
                                                OnClientNodeDropping="OnClientNodeDropping"
                                                Width="200px">
                                            </telerik:RadTreeView>
                                        </td>
                                        <td>
                                            <telerik:RadEditor ID="rdEdtr" runat="server" ForeColor="Black">
                                            </telerik:RadEditor>
                                        </td>
                                    </tr>
                                </table>
                                <br />
                                <center>
                 <telerik:RadButton ID="btnUpdate" runat="server"   Text="Update"  
                                            AutoPostBack="True" ButtonType="LinkButton" OnClick="btnUpdate_Click">
                     
                                  </telerik:RadButton>
                </center>
                            </ContentTemplate>
     
                        </telerik:RadWindow>
     
     
     
                        <telerik:RadGrid ID="rgEmp"
                            AutoGenerateColumns="False" runat="server" Width="80%"
                            OnItemCommand="rgEmp_ItemCommand" OnPreRender="rgEmp_PreRender" HeaderStyle-BackColor="#ccffff" ItemStyle-BorderWidth="1px" BackColor="#33CCFF" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="16px">
                            <ClientSettings EnablePostBackOnRowClick="true">
                                <Selecting AllowRowSelect="true" />
                            </ClientSettings>
                            <MasterTableView DataKeyNames="Id">
                                <Columns>
                                    <telerik:GridTemplateColumn HeaderText="Id" UniqueName="Id">
                                        <ItemTemplate>
     
                                            <asp:Label ID="lblId" runat="server" Text='<%#Eval("Id") %>'></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn HeaderText="Description" HeaderStyle-HorizontalAlign="Center" ItemStyle-BorderColor="Black">
                                        <ItemTemplate>
                                            <asp:Label ID="lblQuatation" runat="server" Text='<%#Eval("Description") %>'></asp:Label>
                                        </ItemTemplate>
     
                                        <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
     
                                        <ItemStyle BorderColor="Black"></ItemStyle>
     
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-Width="20%" HeaderStyle-HorizontalAlign="Center" ItemStyle-BorderColor="Black"
                                        ItemStyle-HorizontalAlign="Center" ItemStyle-BorderWidth="1px">
                                        <ItemTemplate>
                                            <telerik:RadButton ID="rbtnEdit" runat="server" Text="Edit" ForeColor="Black" Width="100px" Font-Size="Medium" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"Description") %>' CommandName="RowEdit"
                                                ButtonType="LinkButton">
                                            </telerik:RadButton>
                                        </ItemTemplate>
     
                                        <HeaderStyle HorizontalAlign="Center" Width="20%"></HeaderStyle>
     
                                        <ItemStyle HorizontalAlign="Center"></ItemStyle>
                                    </telerik:GridTemplateColumn>
                                </Columns>
                            </MasterTableView>
     
                            <HeaderStyle BackColor="#99FF99" BorderWidth="1px" ForeColor="Black" />
                            <ItemStyle BackColor="#CCCCFF" BorderWidth="1px" ForeColor="Black" />
                            <PagerStyle Mode="Advanced"></PagerStyle>
                        </telerik:RadGrid>
                    </ContentTemplate>
                </asp:UpdatePanel>
     
     
            </div>
            <script type="text/javascript">
                //<![CDATA[
                var editor = null;
                var tree = null;
                function storeReferences() {
                    debugger;
                    editor = document.getElementById('<%=lbledtr.ClientID%>').innerText;
                    tree = document.getElementById('<%=lbltree.ClientID%>').innerText;
     
                    // makeUnselectable(tree.get_element());
                    Sys.Application.remove_load(storeReferences);
                }
                Sys.Application.add_load(storeReferences);
            </script>
        </form>
    </body>
    </html>
     
     
     
    This is my .cs Page Code
     
     
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.IO;
    using System.Linq;
    using System.Text.RegularExpressions;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    namespace RadEditor
    {
        public partial class WebFormUpdateDb : System.Web.UI.Page
        {
     
     
            SqlConnection conn = new SqlConnection("Data Source=ASTORIA-LT10\\SQLEXPRESS;Initial Catalog=Description;User ID=sa;Password=pass123");
            SqlCommand cmd = new SqlCommand();
            SqlDataAdapter da;
            DataSet ds;
     
            public string Editors = "RadWinEmp_Add";
            public string Trees=   "rdTreeView";
            protected void Page_Load(object sender, EventArgs e)
            {
                PopulateTreeViewFromDirectory(rdTreeView.Nodes, Server.MapPath("~/Images"));
                rdTreeView.Nodes[0].Expanded = true;
                rdEdtr.Modules.Clear();
                BindData();
     
            }
     
            public void BindData()
            {
                ds = new DataSet();
                SqlCommand cmdBind = new SqlCommand();
                cmdBind.Connection = conn;
                conn.Open();
                cmdBind.CommandType = CommandType.StoredProcedure;
                cmdBind.CommandText = "usp_SEL_GetAllDescription";
                cmdBind.ExecuteNonQuery();
                da = new SqlDataAdapter(cmdBind);
                da.Fill(ds);
                rgEmp.DataSource = ds.Tables[0];
                rgEmp.DataBind();
                conn.Close();
            }
     
     
     
            private void PopulateTreeViewFromDirectory(RadTreeNodeCollection nodes, string _path)
            {
                string[] _directories = Directory.GetDirectories(_path);
                foreach (string _directory in _directories)
                {
                    RadTreeNode node = new RadTreeNode();
                    node.Text = Path.GetFileName(_directory);
                    node.ImageUrl = "~/Images/";
                    node.Attributes["Category"] = "Folder";
                    nodes.Add(node);
                    PopulateTreeViewFromDirectory(node.Nodes, _directory);
                }
                string[] _files = Directory.GetFiles(_path);
                foreach (string _file in _files)
                {
                    if (IsSupportedFileType(_file))
                    {
                        RadTreeNode node = new RadTreeNode();
                        node.Text = Path.GetFileName(_file);
                        node.ImageUrl = "~/Images/" + Path.GetExtension(_file).Substring(1) + ".png";
                        node.Value = ConvertAbsoluteToRelative(_file);
                        nodes.Add(node);
                    }
                }
            }
     
     
            private bool IsSupportedFileType(string file)
            {
                string pat = "(\\.gif|\\.jpg|\\.jpeg|\\.png)$";
                return Regex.IsMatch(file, pat, RegexOptions.IgnoreCase);
            }
     
            private string ConvertAbsoluteToRelative(string absolute)
            {
                string relative = absolute.Replace(MapPath(Request.ApplicationPath), Request.ApplicationPath);
                return relative.Replace("\\", "/");
            }
     
     
            protected void btnUpdate_Click(object sender, EventArgs e)
            {
                string html = rdEdtr.Content;
                string EdId = Session["EdId"].ToString();
                RadWinEmp_Add.Visible = false;
                cmd.Connection = conn;
                conn.Open();
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.CommandText = "usp_UPD_DescriptionById";
                cmd.Parameters.AddWithValue("@Id", EdId);
                cmd.Parameters.AddWithValue("@Description", html);
                cmd.ExecuteNonQuery();
                conn.Close();
                BindData();
            }
     
     
     
            protected void rgEmp_PreRender(object sender, EventArgs e)
            {
                rgEmp.MasterTableView.GetColumn("Id").Visible = false;
            }
     
     
     
            protected void rgEmp_ItemCommand(object sender, GridCommandEventArgs e)
            {
                if (e.CommandName == "RowEdit")
                {
                    RadWinEmp_Add.VisibleOnPageLoad = true;
                    RadWinEmp_Add.Visible = true;
                    RadWinEmp_Add.Title = "Edit Details";
                    string arguments = e.CommandArgument.ToString();
                    string id = rgEmp.MasterTableView.DataKeyValues[e.Item.ItemIndex]["Id"].ToString();
                    Session["EdId"] = id;
                    rdEdtr.Content = arguments;
                }
            }
        }
    }
  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 23 May 2014 Link to this post

    Hi Santosh,

    The provided code does not include any proper references for the implemented client-side code and as mentioned the problem is related to it.

    Also, I can determine that this project is used with data bases. Due to that I am unable to locally run and test properly such implementation.

    I suggest trying to isolate the problem in a simple project and provide it as a file attachment, along with the JS implementation, so that I could properly investigate it locally.


    Regards,
    Ianko
    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.

     
  7. Santosh
    Santosh avatar
    4 posts
    Member since:
    Nov 2012

    Posted 27 May 2014 in reply to Ianko Link to this post

    Hi lanko thanks for reply,<br><br>The following is the link which contains the project in visual studio 2013 and with database back up file. Database version is SqlServer 2008.<br><br>After running the project, in browser you need to press the edit button and you will get the window with tree and editor. You just try to drag a image from tree into the editor you will get a javascript error. This javascript code is present in script file.<br><br>And I want you to find or suggestions to solve that javascript error problem.<br><br><br><br><br><br><br>​
     
     
  8. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 28 May 2014 Link to this post

    Hi Santosh,

    I tried to restore the database with the provided BAK file, but to no avail. The SQL Server 2008 throws the following error:

    TITLE: Microsoft SQL Server Management Studio
    ------------------------------

    Object cannot be cast from DBNull to other types. (mscorlib)


    I recommend using a dummy database or a small table attached to the App_Data folder in a simpler isolated project. Using such complex project would be difficult for me to isolate the problem in a short period of time. Also, the problem is related to client-side functionality and I do not this this is related to the data base. As suggested, try isolating  the problem in a simple project.

    Regards,

    Ianko
    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
UI for ASP.NET Ajax is Ready for VS 2017