Hi,
I want to use raddocks in sharepoint 2010 using ajax to create them and to reload their content.
My problem is happening when I add the first dock dinamically. The ajax request is made and my javascript is evaluated after the request is done but the i'm unable to get the RadDock client instance.
I already tried the hidden updatePanel approach and the RadAjaxManager approach but I did not succeed.
Here is the code I'm using:
Can someone help me?
Michael Pinheiro
I want to use raddocks in sharepoint 2010 using ajax to create them and to reload their content.
My problem is happening when I add the first dock dinamically. The ajax request is made and my javascript is evaluated after the request is done but the i'm unable to get the RadDock client instance.
I already tried the hidden updatePanel approach and the RadAjaxManager approach but I did not succeed.
Here is the code I'm using:
- WebPart code (RadDockSpike.cs):
[ToolboxItemAttribute(
false
)]
public
class
RadDockSpike : WebPart
{
// Visual Studio might automatically update this path when you change the Visual Web Part project item.
private
const
string
_ascxPath = @
"~/_CONTROLTEMPLATES/Buv.Backoffice.WebAdmin/RadDockSpike/RadDockSpikeUserControl.ascx"
;
private
RadAjaxManager _ajaxManager;
protected
override
void
OnInit(EventArgs e)
{
base
.OnInit(e);
// Init the ajax manager
_ajaxManager =
new
RadAjaxManager();
_ajaxManager.EnableEmbeddedScripts =
true
;
Page.Items.Add(
typeof
(RadAjaxManager), _ajaxManager);
Page.Form.Controls.AddAt(0, _ajaxManager);
}
protected
override
void
CreateChildControls()
{
base
.CreateChildControls();
Control control = Page.LoadControl(_ascxPath);
RadDockSpikeUserControl controlAux = control
as
RadDockSpikeUserControl;
controlAux.AjaxManager = _ajaxManager;
Controls.Add(control);
}
}
- Usercontrol loaded by the WebPart (RadDockSpikeUserControl.cs):
public
partial
class
RadDockSpikeUserControl : UserControl
{
public
RadAjaxManager AjaxManager;
private
List<DockState> _currentDockStates
{
get
{
//Store the info about the added docks in the session. For real life
// applications we recommend using database or other storage medium
// for persisting this information.
List<DockState> _currentDockStates = (List<DockState>)Session[
"CurrentDockStatesMyPortal"
];
if
(Object.Equals(_currentDockStates,
null
))
{
_currentDockStates =
new
List<DockState>();
Session[
"CurrentDockStatesMyPortal"
] = _currentDockStates;
}
return
_currentDockStates;
}
set
{
Session[
"CurrentDockStatesMyPortal"
] = value;
}
}
protected
override
void
OnInit(EventArgs e)
{
base
.OnInit(e);
// Initialize toolbar
RadToolBarButton button =
new
RadToolBarButton();
button.Text =
"Open new dock"
;
ToolBar.Items.Add(button);
ToolBar.ButtonClick +=
new
RadToolBarEventHandler(ToolBar_ButtonClick);
//Recreate the docks in order to ensure their proper operation
for
(
int
i = 0; i < _currentDockStates.Count; i++)
{
if
(_currentDockStates[i].Closed ==
false
)
{
AddDockFromState(_currentDockStates[i]);
//We want to save the dock state every time a dock is moved.
}
}
}
protected
override
void
CreateChildControls()
{
base
.CreateChildControls();
}
protected
override
void
OnPreRender(EventArgs e)
{
base
.OnPreRender(e);
AjaxManager.AjaxSettings.AddAjaxSetting(ToolBar, Panel1, AjaxLoadingPanel);
}
protected
void
HandleLoadDockLayout(
object
sender, DockLayoutEventArgs e)
{
//Populate the event args with the state information. The RadDockLayout control
// will automatically move the docks according that information.
foreach
(DockState state
in
_currentDockStates)
{
e.Positions[state.UniqueName] = state.DockZoneID;
e.Indices[state.UniqueName] = state.Index;
}
}
protected
void
HandleSaveDockLayout(
object
sender, DockLayoutEventArgs e)
{
//Save the dock state in the session. This will enable us
// to recreate the dock in the next Page_Init.
_currentDockStates = DockLayout.GetRegisteredDocksState();
}
void
ToolBar_ButtonClick(
object
sender, RadToolBarEventArgs e)
{
AddDock(
"Untitled..."
);
}
private
void
AddDockFromState(DockState state)
{
RadDock dock =
new
RadDock();
dock.ID =
string
.Format(
"Dock{0}"
, state.UniqueName);
dock.ApplyState(state);
Panel1.Controls.Add(dock);
CreateSaveStateTrigger(dock);
}
protected
void
AddDock(
string
title)
{
RadDock dock =
new
RadDock();
dock.UniqueName = Guid.NewGuid().ToString();
dock.ID =
string
.Format(
"Dock{0}"
, dock.UniqueName);
dock.Title = title;
dock.Text =
"Dock content"
;
//dock.Resizable = true;
//dock.EnableRoundedCorners = true;
Panel1.Controls.Add(dock);
CreateSaveStateTrigger(dock);
// Here is the problem: The dock client instance is null???!!!
string
script =
string
.Format(@"
var dock = $find(
'{0}'
);
alert(
'Dock: '
+ dock);
//$find('{1}').dock($find('{0}'));
$find(
'{2}'
).ajaxRequest();",
dock.ClientID, PageDockZone.ClientID, AjaxManager.ClientID);
AjaxManager.ResponseScripts.Add(script);
}
private
void
CreateSaveStateTrigger(RadDock dock)
{
//Ensure that the RadDock control will initiate postback
// when its position changes on the client or any of the commands is clicked.
//Using the trigger we will "ajaxify" that postback.
dock.AutoPostBack =
true
;
dock.CommandsAutoPostBack =
true
;
AjaxSetting trigger =
new
AjaxSetting();
trigger.AjaxControlID = dock.ID;
trigger.EventName =
"DockPositionChanged"
;
AjaxUpdatedControl updatedControl =
new
AjaxUpdatedControl();
updatedControl.ControlID = Panel1.ID;
trigger.UpdatedControls.Add(updatedControl);
AjaxManager.AjaxSettings.Add(trigger);
trigger =
new
AjaxSetting();
trigger.AjaxControlID = dock.ID;
trigger.EventName =
"Command"
;
updatedControl =
new
AjaxUpdatedControl();
updatedControl.ControlID = Panel1.ID;
trigger.UpdatedControls.Add(updatedControl);
AjaxManager.AjaxSettings.Add(trigger);
}
}
-
Usercontrol loaded by the WebPart (RadDockSpikeUserControl.ascx):
<
telerik:RadToolBar
ID
=
"ToolBar"
runat
=
"server"
>
</
telerik:RadToolBar
>
<
asp:Panel
ID
=
"DocksContainer"
runat
=
"server"
>
<
telerik:RadDockLayout
ID
=
"DockLayout"
runat
=
"server"
OnLoadDockLayout
=
"HandleLoadDockLayout"
OnSaveDockLayout
=
"HandleSaveDockLayout"
>
<
telerik:RadDockZone
ID
=
"PageDockZone"
runat
=
"server"
>
</
telerik:RadDockZone
>
<
div
style
=
"display: block"
>
Hidden Ajaxified asp:Panel, which is used to receive the new dock controls. We will move
them with script to the desired initial dock zone.
<
asp:Panel
ID
=
"Panel1"
runat
=
"server"
>
</
asp:Panel
>
</
div
>
</
telerik:RadDockLayout
>
</
asp:Panel
>
<
telerik:RadAjaxLoadingPanel
ID
=
"AjaxLoadingPanel"
runat
=
"server"
Skin
=
"Default"
MinDisplayTime
=
"500"
>
</
telerik:RadAjaxLoadingPanel
>
Can someone help me?
Michael Pinheiro