Telerik Forums
UI for ASP.NET AJAX Forum
1 answer
74 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

 

Rumen
Telerik team
 answered on 28 Aug 2023
0 answers
42 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.

yuki
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 13 Apr 2023
0 answers
44 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>

yuki
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 12 Apr 2023
1 answer
56 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
174 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();
}

Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
 asked on 07 Jan 2022
1 answer
109 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
42 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
1.6K+ 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
1 answer
49 views

Hi sir,

 

           I use rad splitter i give color but not display so how i give color  but rad splitter now work.

Note: 

     I need give color for i mark in screenshot pls reply ASAP

 

Vessy
Telerik team
 answered on 10 Jul 2020
5 answers
100 views

sorry eng not good. i took telerik valuation project from developer, new to telerik.

 

radsplitter on usercontrol and doesnt resize to screen width at 100% when loaded. once screen resizes from user mouse then radsplitter shows and adjusts to 100%.  please see code to duplicate your bug. please advise workaround

 

page with control

<asp:Content ID="Content1" ContentPlaceHolderID="ChildContent" runat="server">
 
    <div style="width: 600px; height: 600px;">
        <div id="divtest" style="display: block">
            <telerik:RadButton runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="test 1" AutoPostBack="false" Font-Size="Medium"
                OnClientCheckedChanged="OnClientCheckedChanged" Height="16px" GroupName="test" />
            <telerik:RadButton runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="test 2" AutoPostBack="false" Font-Size="Medium"
                OnClientCheckedChanged="OnClientCheckedChanged" Height="16px" GroupName="test" />
        </div>
 
        <div id="div-safeharborContrib" style="display: none; background-color: lightgreen;">
            <ucPSWTest:ucTest ID="ucTest" runat="server" />
        </div>
    </div>
 
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        //![CDATA[               
        function OnClientCheckedChanged(sender, args) {           
            $("#divtest").fadeOut("slow", function () {           
                $("#div-safeharborContrib").fadeIn("slow", function () {           
                });
            });
        }               
        //]]>
    </script>
</telerik:RadScriptBlock>

 

 

control uctest

<telerik:RadSplitter runat="server" ResizeMode="Proportional" Orientation="Vertical" Width="100%" Height="650px" VisibleDuringInit="false">
 
    <telerik:RadPane runat="server" Width="25%" />
    <telerik:RadSplitBar runat="server" CollapseMode="Forward" />
    <telerik:RadPane runat="server" BorderStyle="None" BorderWidth="0" Width="75%">               
        <div>test</div>
    </telerik:RadPane>
 
    <telerik:RadSplitBar runat="server" CollapseMode="Backward" />
    <telerik:RadPane runat="server" Width="25%" Height="100%" BackColor="#fffed0" />
         
</telerik:RadSplitter>

 

 

 

 

 

Vessy
Telerik team
 answered on 19 Feb 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?