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

Problem with Editer and Tree Present in Update Panel

6 Answers 74 Views

Editor

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

6 Answers, 1 is accepted

answered on 22 May 2014, 07:26 AM

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.

answered on 22 May 2014, 09:27 AM

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>

<html xmlns="http://www.w3.org/1999/xhtml">

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

            }

        }

    }

}

answered on 23 May 2014, 07:49 AM

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.

answered on 27 May 2014, 05:21 AM

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>

http://www.mediafire.com/download/bgbtdekfqb5tth6/RadEditor.zip

answered on 28 May 2014, 08:31 AM

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.