or
2 answers
50 views
Dear team members,
Is it possible to catch a drag event on client-side that occurs when a RadSplitBar is being dragged? I want to display the change of the position continuously.
Kind Regards
Attila Antal
Telerik team
answered
on
23 Dec 2024
2 answers
44 views
Good afternoon,
I'm looking to replace a CollapsiblePanelExtender with a Telerik control. The closest to this seems to be a RadSplitter.
How can I make a horizontal RadSplitter, which contains two panes, change its height to keep one pane at the top as a constant, but expand and collapse with a second pane. I'm using a button in the top pane to control the second pane, rather than a RadSplitterBar.
<telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Width="900px" Orientation="Horizontal">
<telerik:RadPane ID="RadPane1" runat="server" Height="30px" CssClass="collapsePanelHeader">
<div style="padding:5px; padding-left:20px; cursor:pointer; vertical-align:middle;" onclick="ToggleCollapsePane()">
<div style="float:left;">
<asp:Label ID="lblOptionsHdr" runat="server" Text="Filter Options" Font-Bold="True" />
</div>
</div>
</telerik:RadPane>
<telerik:RadPane ID="RadPane2" runat="server" Height="270px" CssClass="collapsePanelContent">
<div id="divContent" style="padding:20px; vertical-align:middle;">
<table style="vertical-align:top; width:100%; border-spacing:5px; padding:5px;">
<tr>
<td>
......... several filter options (dropdown lists, radiobuttons)
</td>
</tr>
</table>
</div>
</telerik:RadPane>
</telerik:RadSplitter>When the <div> in pane 1 is clicked it should toggle pane 2, and the splitter adjust its height accordingly:
function ToggleCollapsePane() {
var splitter = $find("<%= RadSplitter1.ClientID %>");
var pane = splitter.getPaneById("<%= RadPane2.ClientID %>");
if (pane.get_collapsed()) {
pane.expand();
splitter.resize(900, 303);
} else {
pane.collapse();
splitter.resize(900, 33);
}
}Is what I'm trying to achievable? Or is there another Telerik control that does this?
Kind regards,
Richard
Rumen
Telerik team
answered
on
18 Dec 2024
1 answer
231 views
Hi everyone,
I'm having problems with $find and getElementById. In my page $find doesn't find the objects while getElementById finds them but then the client-side API functions are not executed (error message: "splitter2.get_height is not a function").
$find always returns NULL, both on the RadSplitter and RadGrid.
To understand I also isolated the affected code in a new page, same problem. This is the code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<div>
<telerik:RadSplitter ID="RadSplitter1" runat="server" SplitBarsSize="2" Width="100%" >
<telerik:RadPane ID="LeftPane" runat="server" >
<telerik:RadGrid ID="RadGrid1" runat="server"></telerik:RadGrid>
</telerik:RadPane>
<telerik:RadPane ID="RightPane" runat="server" >
</telerik:RadPane>
</telerik:RadSplitter>
</div>
<script type="text/javascript">
var Alt = window.innerHeight;
var Larg = window.innerWidth;
var splitter = $find('<%= RadSplitter1.ClientID %>');
alert(splitter);
var grid = $find('<%= RadGrid1.ClientID %>');
alert(grid);
var splitter2 = document.getElementById('<%= RadSplitter1.ClientID %>');
alert(splitter2);
alert(splitter2.get_height());
splitter2.set_height(800);
</script>
</form>
</body>
</html>
Thanks for your help
0 answers
132 views
I have a diagram with fixed width and height, and on this diagram I have tons of generated shapes in a tree layout.
The shapes cannot be fully displayed in the diagram, only a part of them can be seen. I need to zoom out to shrink all the shapes in order to see the complete picture. However, because there are a lot of shapes, after zooming out, each shape becomes very small and cannot be seen clearly. I hope the diagram can have a horizontal and vertical scrolling feature, so that I can scroll to view the entire picture. I did not find the scrolling feature for the diagram in the documentation. (Pan and drag are not what I'm looking for.)
How can I implement this?
Thanks.
0 answers
92 views
I don't know why the title text of sliding pane is upside down. This sliding pane is a 'left-to-right' pane, so the titel text should be facing left.
Can someone help me?
<div>
<telerik:RadSplitter runat="server" ID="splitter" Width="1500px" Height="1000px" Orientation="Vertical" RenderMode="Lightweight">
<telerik:RadPane runat="server" ID="Pane1" Scrolling="None" Width="22px">
<telerik:RadSlidingZone runat="server" ID="SlidingZone1" Width="22px" SlideDirection="Right">
<telerik:RadSlidingPane runat="server" ID="SlidingPane1" Width="600px" EnableDock="false" EnableResize="false" Title="Input Control">
<div style="padding:5px;">
<table>
<tr>
<td style="width:150px; text-align:left; vertical-align:text-bottom">
<telerik:RadLabel runat="server" ID="InputNodeLabel" AssociatedControlID="InputNodeDropDownList" Text="Input Node:"></telerik:RadLabel>
</td>
<td>
<telerik:RadDropdownList runat="server" ID="InputNodeDropDownList" DefaultMessage="Select..." DropDownHeight="300px" DropDownWidth="200px" EnableVirtualScrolling="true">
</telerik:RadDropdownList>
</td>
<td>
<telerik:RadLabel runat="server" ID="ShowNode"></telerik:RadLabel>
</td>
</tr>
<tr>
<td style="width:150px; text-align:left; vertical-align:text-bottom">
<telerik:RadLabel runat="server" ID="InputLevelLabel" AssociatedControlID="InputLevlTextBox" Text="Input Level:"></telerik:RadLabel>
</td>
<td>
<telerik:RadTextBox runat="server" ID="InputLevelTextBox" Width="200px" EmptyMessage="Please type here..."></telerik:RadTextBox>
</td>
<td>
<telerik:RadLabel runat="server" ID="ShowLevel"></telerik:RadLabel>
</td>
</tr>
<tr>
<td>
<telerik:RadLabel runat="server" ID="InputDirectionLabel" AssociatedControlID="InputDirectionComboBox" Text="Choose Direction:"></telerik:RadLabel>
</td>
<td>
<telerik:RadComboBox runat="server" ID="InputDirectionComboBox" >
<Items>
<telerik:RadComboBoxItem Selected="true" Value="DefaultSelect" Text="(Select...)" />
<telerik:RadComboBoxItem Value="Forward" Text="Forward" />
<telerik:RadComboBoxItem Value="Backward" Text="Backward"/>
</Items>
</telerik:RadComboBox>
</td>
<td>
<telerik:RadLabel runat="server" ID="ShowDirection"></telerik:RadLabel>
</td>
</tr>
<tr>
<td><br /></td>
</tr>
<tr>
<td>
<telerik:RadButton runat="server" ID="Apply1" Text="Apply" Width="100px" AutoPostBack="true" OnClick="Apply1_Click"></telerik:RadButton>
</td>
</tr>
</table>
</div>
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="SlidingPane2" runat="server" Width="600px" Title="test">
Test pane content
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
<telerik:RadPane runat="server" ID="Pane2" Scrolling="None" >
<telerik:RadDiagram runat="server" ID="test_diagram" Width ="100%" Height="1000" ZoomRate="1" ZoomMax="1">
<LayoutSettings Enabled="true" Type="Tree" Subtype="Right" />
</telerik:RadDiagram>
</telerik:RadPane>
</telerik:RadSplitter>
</div>1 answer
117 views
I'm trying to divide a content area into 4 equal quadrants. so I have it setup like this:
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">
<telerik:RadSplitter RenderMode="Lightweight" ID="rsMain" runat="server" Height="100%" Width="100%" BorderStyle="None" BorderSize="1" CssClass="Center">
<telerik:RadPane ID="Radpane10" runat="server" Scrolling="none" RenderMode="Lightweight">
<telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter6" runat="server" Orientation="Horizontal">
<telerik:RadPane ID="Radpane11" runat="server" Height="50%" RenderMode="Lightweight">
<telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter2" runat="server">
<telerik:RadPane ID="Radpane3" runat="server" CssClass="Round" Width="50%" Height="50%" BackColor="Red">
Map
</telerik:RadPane>
<telerik:RadPane ID="Radpane4" runat="server" CssClass="Round" Width="50%" Height="50%">
Pie Chart
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadPane ID="Radpane5" runat="server" Height="50%" RenderMode="Lightweight">
<telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter1" runat="server">
<telerik:RadPane ID="Radpane1" runat="server" CssClass="Round" Width="50%" Height="50%">
Line Chart
</telerik:RadPane>
<telerik:RadPane ID="Radpane2" runat="server" CssClass="Round" Width="50%" Height="50%" BackColor="Green">
Grid
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</asp:Content>
When it 1st comes up it looks like this:
After I resize the browser it looks like this which is what I was going for:
Thoughts or suggestions on how to have it look like the second screen shot all the time?
Vessy
Telerik team
answered
on
25 Apr 2022
0 answers
289 views
I have a RadEditor (EditType="Inline"), inside a RadSplitter/RadPane, and would like to trigger a post back to save to the database, without using a Button click.
Which event is most appropriate to do this?
I've experimented with the OnClientInlineEditCompleted() event. However, it also fires when I click a toolbar button, which is too soon.
The OnClientCommandExecuted() event fires with almost every action, so not good solution.
In the server-side database save method, I compare the existing data to the RadEditor content, if they're different, save it to the database. The problem here is that the changes made to the RadEditor do not show, thus the server-side save method is not fired.
I've attempted to set the focus back to the content of the RadEditor before calling the "__doPostBack()" method, thinking it will accept the changes to the content and save them in the PostBack. It doesn't.
Client code:
function OnClientInlineEditCompleted() {
var editor = $find("<%= NotePad1.ClientID %>");
editor.setFocus();
__doPostBack("", "");
}
PostBack code:
if (NotePad1.Content != MyTable.MyNotePad)
{
UpdateNotePad();
}
1 answer
202 views
Hi,
I have been struggling with this issue for some time. Here is the problem. When the page is first loaded, the splitter is displaying half of the content as in step1.jpg. However when I resize the browser width or height just tiny bit, the splitter is displaying the entire content occupying the entire page as in step2.jpg.
<telerik:RadSplitter runat="server" ID="Splitter" Width="100%" OnClientLoaded="SplitterLoaded" Height="95%">
<telerik:RadPane runat="server" ID="LeftPane" Scrolling="Both">
<!-- left pane is loaded dynamically -->
</telerik:RadPane>
<telerik:RadSplitBar runat="server" ID="SplitBar" CollapseMode="Both" />
<telerik:RadPane runat="server" ID="RightPane">
<!-- right pane is loaded dynamically -->
</telerik:RadPane>
</telerik:RadSplitter>
The content in the splitter is loaded dynamically using "knockout" js library. Is there a way to resize the splitter to display the entire content as in step2.jpg when the page is loaded?
Please let me know if you need more information. I really appreciate any help from you.
Vessy
Telerik team
answered
on
24 Aug 2021
2 answers
107 views
Greetings to all,
Quick question:
Is the overflow property always set to "hidden" according to your framework? I've been commissioned to work on a project that is using Telerik.
I need to set it up to "visible" because it's eating up a tab menu after the user clicks on a anchor hyperlink type of link on the bottom pane.
Nothing is set up on <telerik:RadPane ID="radPaneBottom" runat="server" Width="100%" height="64%" OnClientLoaded="SplitterLoaded" scrolling="None" >
that points out to the overflow being directly set to "hidden" but looking using the inspect option for browser debugging, there is a div container named:
<div id="RAD_SPLITTER_PANE_CONTENT_radPaneBottom" style="width: 434px; height: 510px; overflow: hidden;">
If I set the overflow to 'visible' on the debugger (Elements) from google chrome, then the problem is gone.
Is there something I am missing here? Would there be a RadPane property that would allow me to set the overflow to "visible"?
Please advice.
Vessy
Telerik team
answered
on
22 Apr 2021
5 answers
2.3K+ views
On my web application I need to offer users a way to print a pane, and I have been using the javascript function to do that( https://docs.telerik.com/devtools/aspnet-ajax/controls/splitter/panes/printing-content ). But the problem is that there is a popup of the pane contents that remains after they have finished printing. And this can be confusing for some people as they may still think the popup is an editable form.
I have been using the code from this forum post: https://www.telerik.com/forums/radpane-close-after-print
But it only works on IE, which is now obsolete and removed from all of our employee's machines. On Chrome and Edge it will simply try to print a blank page, as the print dialog appears before the popup is actually rendered.
Is there any solution for this that works properly on Edge and Chrome?
Vessy
Telerik team
answered
on
22 Apr 2021
