I'm in a bind for time and I need a fast answer. I have a web page that currently uses JavaScript to expand/collapse a Splitter bar in the OnClientSelectedIndexChanged of a RadComboBox
var splitter = $find("<%=RadSplitterEditor.ClientID%>");
var endPane = splitter.getEndPane();
endPane.expand(Telerik.Web.UI.SplitterDirection.Backward);
Is there any simple way to duplicate this behavior on the server side, using the RadAjaxManager?
var splitter = $find("<%=RadSplitterEditor.ClientID%>");
var endPane = splitter.getEndPane();
endPane.expand(Telerik.Web.UI.SplitterDirection.Backward);
Is there any simple way to duplicate this behavior on the server side, using the RadAjaxManager?
6 Answers, 1 is accepted
0

Princy
Top achievements
Rank 2
answered on 08 Apr 2014, 06:47 AM
Hi Boris,
For expanding the sliding pane from code behind you need to manually set the ExpandedPanelId property of RadSlidingZone. Please have a look into the sample code snippet which works fine at my end.
ASPX:
C#:
Thanks,
Princy.
For expanding the sliding pane from code behind you need to manually set the ExpandedPanelId property of RadSlidingZone. Please have a look into the sample code snippet which works fine at my end.
ASPX:
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadComboBox1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadSplitter1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadComboBox
ID
=
"RadComboBox1"
runat
=
"server"
EmptyMessage
=
"select"
AutoPostBack
=
"true"
OnSelectedIndexChanged
=
"RadComboBox1_SelectedIndexChanged"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"Expand/Collapse"
/>
</
Items
>
</
telerik:RadComboBox
>
<
telerik:RadSplitter
ID
=
"RadSplitter1"
runat
=
"server"
Width
=
"100%"
EnableEmbeddedSkins
=
"true"
>
<
telerik:RadPane
ID
=
"LeftPane"
runat
=
"server"
Width
=
"22"
Height
=
"100%"
>
<
telerik:RadSlidingZone
ID
=
"SlidingZone1"
runat
=
"server"
Width
=
"22"
ClickToOpen
=
"true"
>
<
telerik:RadSlidingPane
ID
=
"Pane1"
Title
=
"Highlights"
runat
=
"server"
>
<
table
>
<
tr
>
<
td
>
<
asp:TextBox
ID
=
"TextBox1"
runat
=
"server"
></
asp:TextBox
>
</
td
>
</
tr
>
</
table
>
</
telerik:RadSlidingPane
>
</
telerik:RadSlidingZone
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"MiddlePane"
runat
=
"server"
>
<
div
style
=
"width: 100%; height: 100%;"
>
<
div
id
=
"documentViewer"
style
=
"position: relative; width: 100%; height: 100%"
>
</
div
>
</
div
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
C#:
protected
void
RadComboBox1_SelectedIndexChanged(
object
sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
{
RadSlidingZone slidingzone = (RadSlidingZone)RadSplitter1.GetPaneById(
"LeftPane"
).FindControl(
"SlidingZone1"
);
slidingzone.ExpandedPaneId =
"Pane1"
;
}
Thanks,
Princy.
0

Boris
Top achievements
Rank 1
answered on 08 Apr 2014, 12:58 PM
Actually I've never heard of this RadSlidingZone before. Is this something new?
(My current page is an excessively complex collection of RadPanes and RadSplitBars within a RadSplitter.)
(My current page is an excessively complex collection of RadPanes and RadSplitBars within a RadSplitter.)
0

Boris
Top achievements
Rank 1
answered on 08 Apr 2014, 03:07 PM
Let me modify my previous answer. I believe use of sliding panels is not practical at this time. It would be too big a rework of the page.
I need to be able to expand and collapse one RadPane in the server side code using Ajax (i.e. without a complete postback).
Is this possible?
I need to be able to expand and collapse one RadPane in the server side code using Ajax (i.e. without a complete postback).
Is this possible?
0
Hi Boris,
You can easily collapse/expand a RadPane on the server, by configuring its Collapsed property:
There is no problem to do it on Ajax request, but the specific thing when ajaxifying RadSplitter is that you cannot ajaxify directly a RadPane. You have to update either the whole Splitter, or the content of a RadPane, so the Splitter will be able to behave properly. Detaile dinformation on the sbject is available in this help article: AJAX updates
I hope this information will be helpful for you.
Regards,
Vessy
Telerik
You can easily collapse/expand a RadPane on the server, by configuring its Collapsed property:
RadPane3.Collapsed =
true
;
//RadPane3.Collapsed = false;
There is no problem to do it on Ajax request, but the specific thing when ajaxifying RadSplitter is that you cannot ajaxify directly a RadPane. You have to update either the whole Splitter, or the content of a RadPane, so the Splitter will be able to behave properly. Detaile dinformation on the sbject is available in this help article: AJAX updates
I hope this information will be helpful for you.
Regards,
Vessy
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.
0

Boris
Top achievements
Rank 1
answered on 11 Apr 2014, 09:03 PM
For the sake of testing, I 'ajaxified' the splitter.
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadButton2">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadSplitter1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
(First of all, is that what you had in mind?)
Once I did this I found I could control the expand/collapse of the pane in question in the button's click event.
This seems to work whether the button is inside or outside the splitter.
Since most of the controls that determine whether the pane should be expanded are inside the splitter, I have to ask if this is a good practice.
Second, is there any reason why merely 'ajaxifying' the splitter should affect its height? The splitter's height is set to 100%. Just adding the Ajax declaration as shown above caused the page to come up with the splitter at only about half the page. There are no height settings in the code behind that I am aware of.
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadButton2">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadSplitter1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
(First of all, is that what you had in mind?)
Once I did this I found I could control the expand/collapse of the pane in question in the button's click event.
This seems to work whether the button is inside or outside the splitter.
Since most of the controls that determine whether the pane should be expanded are inside the splitter, I have to ask if this is a good practice.
Second, is there any reason why merely 'ajaxifying' the splitter should affect its height? The splitter's height is set to 100%. Just adding the Ajax declaration as shown above caused the page to come up with the splitter at only about half the page. There are no height settings in the code behind that I am aware of.
0

Boris
Top achievements
Rank 1
answered on 14 Apr 2014, 05:49 PM
I'm going to start a new ticket. It looks like I've run into a splitter resize problem of the sort mentioned here: http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx