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

Invalid JSON Primitive RadDock

7 Answers 224 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 18 Jun 2008, 06:06 PM

I have an evaluation version of the RadControls for ASP.NET AJAX v 2008.1.515.20

I have a simple page with a button that does a postback, and toggles a RadDock's Closed property.

The button is registered in the AjaxManager, and the updated controls is set to the RadDock itself.

After clicking the button several times to show / hide the RadDock, I get the following error:

Invalid JSON primitive:

Any help?

Here is the ASPX Markup:

<%

@ Page Language="C#" AutoEventWireup="true" Theme="Oracle" Codebehind="PopupTest.aspx.cs"

 

Inherits="PasWbApp.UserControls.PopupTest" %>

<%

@ Register Src="../UserControls/AsActivityPopup.ascx" TagName="AsActivityPopup"

 

TagPrefix="adminServerPas" %>

<%

@ 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 id="Head1" runat="server">

 

<title>Untitled Page</title>

</

head>

<

body style="background-color: #ffffff">

 

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

 

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

 

<Scripts>

 

<asp:ScriptReference name="" Assembly="" Path="~/Lib/Java/ScrollToAnchor.js" />

 

</Scripts>

 

</telerik:RadScriptManager>

 

<telerik:RadAjaxManager ID="MasterAjaxManager" runat="server" EnableAJAX="true" DefaultLoadingPanelID="MasterAjaxLoadingPanel"

 

ClientEvents-OnRequestStart="centerUpdatePanel();" RequestQueueSize="5">

 

<AjaxSettings>

 

<telerik:AjaxSetting AjaxControlID="PopupToggleButton">

 

<UpdatedControls>

 

<telerik:AjaxUpdatedControl ControlID="PopupWindow" />

 

</UpdatedControls>

 

</telerik:AjaxSetting>

 

</AjaxSettings>

 

</telerik:RadAjaxManager>

 

<telerik:RadStyleSheetManager ID="MasterStyleSheetManager" runat="server">

 

</telerik:RadStyleSheetManager>

 

<telerik:RadAjaxLoadingPanel ID="MasterAjaxLoadingPanel" runat="server" Height="100%"

 

Width="100%" IsSticky="true" BackColor="White">

 

<img id="MasterAjaxLoadingPanelImage" alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

 

style="border: 0px;" />

 

<div id="MasterAjaxLoadingPanelBackground">

 

</div>

 

</telerik:RadAjaxLoadingPanel>

 

<telerik:RadScriptBlock runat="server" ID="CenterLoadingPanelScriptBlock">

 

<script language="javascript" type="text/javascript">

 

function centerUpdatePanel()

{

centerElementOnScreen(document.getElementById(

'MasterAjaxLoadingPanelBackground'));

}

function centerElementOnScreen(element)

{

var scrollTop = document.body.scrollTop;

var scrollLeft = document.body.scrollLeft;

var viewPortHeight = document.body.clientHeight;

var viewPortWidth = document.body.clientWidth;

if (document.compatMode == "CSS1Compat")

{

viewPortHeight = document.documentElement.clientHeight;

viewPortWidth = document.documentElement.clientWidth;

scrollTop = document.documentElement.scrollTop;

scrollLeft = document.documentElement.scrollLeft;

}

var topOffset = Math.ceil(viewPortHeight/2 - element.offsetHeight/2);

var leftOffset = Math.ceil(viewPortWidth/2 - element.offsetWidth/2);

var top = scrollTop + topOffset - 40;

var left = scrollLeft + leftOffset - 70;

element.style.position =

"fixed";

element.style.zIndex = 30000;

// set the opacity...

 

element.style.opacity = .7;

element.style.filter =

'alpha(opacity=70)';

//element.style.top = top + "px";

 

//element.style.left = left + "px";

 

element.style.top = 0;

element.style.left = 0;

element.style.width = viewPortWidth;

element.style.height = viewPortHeight;

var imgElement = document.getElementById('MasterAjaxLoadingPanelImage');

imgElement.style.position =

"fixed";

imgElement.style.top = top +

"px";

imgElement.style.left = left +

"px";

imgElement.style.opacity = 1;

imgElement.style.filter =

'alpha(opacity=100)';

imgElement.style.zIndex = 40000;

}

</script>

 

</telerik:RadScriptBlock>

 

<div>

 

<asp:Button runat="server" ID="PopupToggleButton" Text="Toggle Popup" />

 

<br />

 

<telerik:RadDockLayout runat="server" ID="DockLayout">

 

<telerik:RadDock runat="server" ID="PopupWindow" DockMode="Floating" Pinned="false"

 

Closed="true" Collapsed="false" Height="520" Width="780">

 

<ContentTemplate>

 

Hello There!

</ContentTemplate>

 

</telerik:RadDock>

 

</telerik:RadDockLayout>

 

</div>

 

</form>

</

body>

</

html>

AND THE CODE BEHIND...

protected void Page_Load( object sender, EventArgs e ) {

this.PopupToggleButton.Click += new EventHandler( PopupToggleButton_Click );

}

protected void PopupToggleButton_Click( object sender, EventArgs e ) {

if( PopupWindow.Closed ) {

PopupWindow.Closed =

false;

}

else {

PopupWindow.Closed =

true;

}

}

7 Answers, 1 is accepted

Sort by
0
Paul
Top achievements
Rank 1
answered on 19 Jun 2008, 04:42 PM
More Due Dilligence here, but the JSON error only happens if you drag around the window.

If you simply close the window, hit the toggle button to open it from the postback, and close the window without moving it, I do not get the error.  If you drag the window, then you will get the error eventually.
0
Paul
Top achievements
Rank 1
answered on 20 Jun 2008, 04:46 PM
I know everyone is chomping at the bit for an answer here.

I was able to workaround the issue ( even though it is still open IMHO ).

Basically, I removed the RadDock itself from being ajaxified, so I cannot change the properites of a RadDock in the code behind and have it open or close.

You CAN however ajaxify the contents of the RadDock, which is more important.

I generate a ResponseScript on the AjaxManager to show / hide the raddock as a popup client side when I need to.

I'll leave this open for the time being to see if anyone from Telerik can chime in.

0
Petio Petkov
Telerik team
answered on 23 Jun 2008, 03:51 PM
Hello Paul,

The problem you experience is due to that you update a floating RadDock with AJAX. When dragging the dock you move it outside the update panel and this causes AJAX not working properly as it attempts to recreate the dock at the place it was previously located and  the dock is moved at the new place and stays there. In this way two docks with the same id appear on the page and this leads to an exception.

This is a common problem of controls which can be moved in the DOM tree. Improving  the ability of RadDock to work with AJAX and simplifying the whole mechanism is in our TODO list for the next official release. For the time being I suggest that you update the content.

Let us know if you have any other questions.

Best regards,
Petio Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Shani
Top achievements
Rank 1
answered on 23 May 2011, 04:38 PM
Hi,

I have the same problem as describe here,
i didn't understand exactly what you meant by saying:
" For the time being I suggest that you update the content"
how can i solve the problem?

Thanks a lot,
Shani
0
Pero
Telerik team
answered on 25 May 2011, 02:03 PM
Hello Shani,

Instead of ajaxifying the dock itself, you should ajaxify its content. For example, placing the RadDock's content
inside an UpdatePanel would ajaxify the dock's child controls, and you could move the dock anywhere on the page without any problems.

Greetings,
Pero
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.

0
Geoffrey
Top achievements
Rank 1
answered on 09 Jun 2011, 02:50 PM
Jun 23, 2008 you posted that this was on the TODO list for the next release. Has this been addressed?

I have a page that is meant as a search-type page. On the page is multiple rad-docks filled with different types of
search results. They can be filled, and all of the content within each dock works fine (dock content is within an
update panel). But the second you move anything, then search again the page blows up.
Has there been a fix?
Thanks,
Geoff
0
Pero
Telerik team
answered on 13 Jun 2011, 01:41 PM
Hello Geoff,

Is any of the floating docks placed in an Ajax Panel? If yes please make sure only the RadDock's content is ajaxified.
We tried to improve the way the floating docks are ajaxified, but we couldn't change anything because it meant tying the RadDock to an HTML different than the <form/> element, which introduced additional problems. On the other hand we can't ajaxify the entire <form/>, because this will undermine the entire purpose of the Ajax framework - to update only part of the page, and not the entire content.
So, the only way to ajaxify a RadDock control is either by keeping the dock docked to ajaxified zone or ajaxifying the content.

Kind regards,
Pero
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.

Tags
Dock
Asked by
Paul
Top achievements
Rank 1
Answers by
Paul
Top achievements
Rank 1
Petio Petkov
Telerik team
Shani
Top achievements
Rank 1
Pero
Telerik team
Geoffrey
Top achievements
Rank 1
Share this question
or