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

c.parentNode is null

8 Answers 151 Views

Editor

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

Chris asked on 13 Jan 2011, 07:22 AM

I have a page that contains a RadWindow with RadPageViews. When the window is loaded it dynamically creates a pageview and adds a user control that contains a RadEditor control. Everything loads fine however it is throwing a javascript error "c.parentNode is null" after the page is saved.

After doing some debugging it looks like it is occuring when the dispose method is called for the RadEditor. Any help is appreciated.
On Load: c.parentNode = ctl00_ContentPlaceHolder1_RadWindow1_C_PageComponent1_RadEditor1Center

Protected Sub RadMultiPage1_PageViewCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadMultiPageEventArgs) Handles RadMultiPage1.PageViewCreated

Dim pageComponent As PageComponent = LoadControl("Editor.ascx")

pageComponent.BindData()

e.PageView.Controls.Add(pageComponent)

End Sub

8 Answers, 1 is accepted

answered on 19 Jan 2011, 12:31 AM

I have issolated the issue in the attached code. While doing so I uncovered another issue.

Steps to recreate:

1. Open default.aspx
2. Click edit on the item in the grid
3. Click the 2nd tab "Content" in the window and notice the RadEditor works fine.
4. Close the Window and repeat step 2. Notice the RadEditor toolbars do not work. (Proble 1)
5. Click the reload button on the browser and the error is present. In IE8 "Object Required". In Firefox "c.parentNode is null" (Problem 2)

Thank you for your assistance.

MasterPage.aspx

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title></title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Windows7"></telerik:RadSkinManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</form>

</body>

</html>

Default.aspx

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<script type="text/javascript">

function openNewWin(url) {

var x = window.open(url, 'mynewwin', 'width=1024,height=768,toolbar=1');

x.focus();

}

function onRequestStart(sender, args) {

if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 || args.get_eventTarget().indexOf("ExportToWordButton") >= 0 || args.get_eventTarget().indexOf("ExportToCsvButton") >= 0) {

args.set_enableAjax(false);

}

function resizeWindow(sender, eventArgs) {

setTimeout("doResizeWindow()", 100);

}

function doResizeWindow() {

var oWnd = $find("<%= RadWindow1.ClientID %>");

oWnd.autoSize()

}

function OnClientCommandExecuting(editor, args) {

var commandName = args.get_commandName();

if (commandName == "ToggleScreenMode") {

if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode

{

$(".TelerikModalOverlay").css("display", "none");

fullscreen = true;

}

else {

$(".TelerikModalOverlay").css("display", "");

}

</script>

</asp:Content>

<asp:Content ContentPlaceHolderID=ContentPlaceHolder1 runat="server">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<ClientEvents OnRequestStart="onRequestStart" />

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

<telerik:AjaxUpdatedControl ControlID="RadWindow1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"

AllowPaging="True" AllowSorting="True" AlowFilteringByColumn="true"

GridLines="None">

<PagerStyle Mode="NumericPages" AlwaysVisible="true" />

<HeaderContextMenu EnableImageSprites="True" CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

<ExportSettings HideStructureColumns="true" ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true"></ExportSettings>

<MasterTableView AllowFilteringByColumn="True" ShowFooter="false" CommandItemDisplay="Top" DataKeyNames="PageId">

<CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true" ShowExportToCsvButton="true" AddNewRecordText="Add New Page" />

<EditFormSettings>

<EditColumn UniqueName="EditCommandColumn1"></EditColumn>

</EditFormSettings>

<PagerStyle Mode="NextPrevNumericAndAdvanced" />

<Columns>

<telerik:GridBoundColumn UniqueName="PageName" DataField="PageName" SortExpression="PageName" HeaderText="Page Name"></telerik:GridBoundColumn>

<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" HeaderStyle-Width="20">

<HeaderStyle Width="20px"></HeaderStyle>

</telerik:GridEditCommandColumn>

</Columns>

</MasterTableView>

<ClientSettings Selecting-AllowRowSelect="true">

<Selecting AllowRowSelect="True"></Selecting>

</ClientSettings>

</telerik:RadGrid>

<telerik:RadWindowManager ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false" ReloadOnShow="true" IconUrl="favicon.ico" runat="server" EnableShadow="true" style="z-index:20000">

<Windows>

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="false" EnableEmbeddedScripts="true" IconUrl="favicon.ico" Animation="FlyIn" Behaviors="Close" Modal="true" Width="780" Height="600" Title="Add/Edit Page" DestroyOnClose="true">

<ContentTemplate>

<telerik:RadTabStrip ID="RadTabStrip2" runat="server" CausesValidation="false" MultiPageID="RadMultiPage1" OnClientTabSelected="resizeWindow">

<Tabs>

<telerik:RadTab Text="General" Selected="true"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">

<telerik:RadPageView runat="server" ID="RadPageView1" TabIndex="0">

<div style="width:600px;">Some Form</div>

</telerik:RadPageView>

</telerik:RadMultiPage>

<div class="buttonContainer">

<asp:Button ID="btnSubmit" Text="Submit" runat="server" />

</div>

</ContentTemplate>

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

</asp:Content>

Default.aspx.vb

Imports System.Data

Imports Telerik.Web.UI

Partial Class _Default

Inherits System.Web.UI.Page

Private data As New DataTable

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

BindData()

End If

End Sub

Private Sub BindData()

data.Columns.Add("PageId")

data.Columns.Add("PageName")

Dim row As DataRow = data.NewRow()

row("PageId") = 1

row("PageName") = "Test"

data.Rows.Add(row)

RadGrid1.DataSource = data

RadGrid1.DataBind()

End Sub

Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource

RadGrid1.DataSource = data

End Sub

Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGrid1.ItemCommand

If e.CommandName = RadGrid.InitInsertCommandName Then

RadWindow1.VisibleOnPageLoad = True

PageId = 0

e.Canceled = True

ElseIf e.CommandName = RadGrid.EditCommandName Then

RadWindow1.VisibleOnPageLoad = True

PageId = e.Item.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("PageId")

e.Canceled = True

Else

RadWindow1.VisibleOnPageLoad = False

Exit Sub

End If

For Each view As Control In RadMultiPage1.Controls

If view.ID <> "RadPageView1" Then

RadMultiPage1.Controls.Remove(view)

End If

Next

RadTabStrip2.Tabs.Clear()

RadTabStrip2.Tabs.Add(New RadTab("General"))

Dim radTab As New RadTab("Content")

Dim radPageView As New RadPageView()

radPageView.ID = "PageView_Content1"

radPageView.TabIndex = 1

RadMultiPage1.PageViews.Add(radPageView)

RadTabStrip2.Tabs.Add(radTab)

End Sub

Protected Sub RadMultiPage1_PageViewCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadMultiPageEventArgs) Handles RadMultiPage1.PageViewCreated

If e.PageView.ID <> "RadPageView1" Then

Dim component As UserControl = LoadControl("ContentEdit.ascx")

component.ID = "PageComponent1"

e.PageView.Controls.Add(component)

End If

End Sub

Private Property PageId() As Integer

Get

Return ViewState("PageId")

End Get

Set(ByVal value As Integer)

ViewState("PageId") = value

End Set

End Property

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click

RadWindow1.VisibleOnPageLoad = False

End Sub

End Class

ContentEdit.ascx

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<div class="formContainer">

<div class="columnLayout">

<fieldset>

<div class="fieldContainer required oneColumn pos1">

<label for="tbxField">

<span class="requiredIcon">*</span>

<span class="labelText" runat="server" id="Span2">Content</span>

<span class="labelColon">:</span>

</label>

<span class="formField">

<telerik:RadEditor ID="RadEditor1" runat="server" Width="690px" OnClientCommandExecuting="OnClientCommandExecuting"></telerik:RadEditor>

</span>

</div>

</fieldset>

</div>

answered on 21 Jan 2011, 04:28 PM

EditorInContentTemplate.zip

Hi Chris,

I created a sample web site using the provided markup and code and reproduced the problem. After that I fixed it and attached my test project to my reply.

All the best,
Rumen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Accepted

answered on 26 Jan 2011, 04:32 PM

ContentTemplate.zip

Hi Chris,

1) To fix the height issue attach the following function

 //Telerik New
 function OnClientShow(sender) {
 setTimeout(enableRadEditor, 0);
 }

to the OnClientShow property of RadWindow:

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="false" EnableEmbeddedScripts="true"
 IconUrl="favicon.ico" OnClientShow="OnClientShow" ...

2) The second problem will be fixed for the upcoming Q1 2011 release of RadControls for ASP.NET AJAX. I fixed it in the project by adding the following function in the Default.aspx page:

 //Telerik New
 function OnClientLoad(editor) {
 editor._oldRegisterModeChangeHandler = editor._registerModeChangeHandler;
 editor._registerModeChangeHandler = function (attachEvent) {
 if (!this._getModeButtonsWrapper()) return;
 this._oldRegisterModeChangeHandler(attachEvent);
 };
 }

and attaching it to the OnClientLoad property of RadEditor in the ContentEdit.ascx file:

 <telerik:RadEditor ID="RadEditor1" Height="480" runat="server" Width="690px" OnClientCommandExecuting="OnClientCommandExecuting"
 OnClientLoad="OnClientLoad">
 </telerik:RadEditor>

After the upgrade to Q1 2010 you should delete this function and remove the OnClientLoad property.

All the best,
Rumen
the Telerik team

answered on 03 Jun 2012, 01:02 PM

This problem still exists.

This is the scenario:
RadMultiPage with several pages.
USING ONLY KEYBOARD NAVIGATION! - (the problem does not appear when using the mouse)
Using "Tab" to reach a button and hit "Enter" on a button that moves from the 1st to the 2nd page (through calls to RadMultiPage).
Using "Tab" to reach an "Edit" button in a FormView. Hit "Enter".
c.parentNode is null

Workaround, increase RequestQueueSize

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" RequestQueueSize="2">

I have the workaround, and do not have the time to create a demo project for you, but please try to reproduce and resolve.