Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

I keep getting null on RadRotator control

4 Answers 90 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Amber
Top achievements
Rank 1
Amber asked on 25 May 2011, 04:45 AM
telerik:RadRotator ID="RadRotatorHorizontal"
The control above is showing null when I click forward or backward. Please assist if possible. I been on it for last 2 weeks.

Thanks



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="News.Default" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head runat="server" >
    <title>Rotator Page</title>
    <style type="text/css">
        .itemTemplate
        {
            width: 250px;
            height: 40px;
        }
        .rotatatorLeftRightBack, .rotatatorUpDownBack
        {
            float: left;
            background-repeat: no-repeat;
            padding-left: 30px;
            padding-top: 20px;
            width: 407px;
            height: 43px;
        }
        .floatRotator
        {
            float: left;
            margin-top: -5px;
        }
        .start, .stop, .left, .right, .up, .down, .startSelected, .stopSelected
        {
            width: 20px;
            height: 20px;
            display: block;
            cursor: hand;
            outline: none;
        }
        #navigationHorizontal .start, #navigationHorizontal .stop, .left, .right, #navigationHorizontal .startSelected, #navigationHorizontal .stopSelected
        {
            background-image: url('IMAGES/HorizontalButtons.gif');
        }
        #navigationVertical .start, #navigationVertical .stop, .up, .down, #navigationVertical .stopSelected, #navigationVertical .startSelected
        {
            background-image: url('IMAGES/VerticalButtons.gif');
        }
        .start span, .stop span, .left span, .right span, .down span, .up span, .stopSelected span, .startSelected span
        {
            width: 20px;
            height: 20px;
            display: block;
            text-indent: -500000px;
        }
        .stopSelected
        {
            background-position: 0px -25px;
        }
        .startSelected
        {
            background-position: -25px -25px;
        }
        .stop
        {
            background-position: 0px 0px;
        }
        .start
        {
            background-position: -25px 0px;
        }
        .left
        {
            background-position: -50px 0px;
        }
        .right
        {
            background-position: -75px 0px;
        }
        .down
        {
            background-position: -50px 0px;
        }
        .up
        {
            background-position: -75px 0px;
        }
        /* Hovers */.stop:hover
        {
            background-position: 0px -25px;
        }
        .start:hover
        {
            background-position: -25px -25px;
        }
        .stop:hover
        {
            background-position: 0px -25px;
        }
        .left:hover
        {
            background-position: -50px -25px;
        }
        .right:hover
        {
            background-position: -75px -25px;
        }
        .down:hover
        {
            background-position: -50px -25px;
        }
        .up:hover
        {
            background-position: -75px -25px;
        }
        .commandsWrapper, .commandsWrapper li
        {
            float: left;
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
            height: auto;
            display: block;
        }
         
        .commandsWrapper
        {
            width: 136px;
            height: 20px;
            padding: 2px 0 0 10px;
        }
        .commandsWrapper li
        {
            margin-right: 14px;
            _margin-right: 13px; /* START IE6 hack */
        }
        .commandsWrapper ul:after
        {
            content: "";
            display: block;
            height: 0;
            overflow: hidden;
            line-height: 0;
            font-size: 0;
            clear: both;
            visibility: hidden;
        }
        .title
        {
            font-size: 20px;
            margin-bottom: 15px;
        }
    </style>
   
</head>
<body class="BODY">
    <form id="Form1" method="post" runat="server">
    <telerik:RadScriptManager ID="ScriptManager1" runat="server"> </telerik:RadScriptManager> 
    <script type="text/javascript">
        //<![CDATA[
        function GetRotator() {
            //return $find('<%#RadRotatorHorizontal.ClientID %>');
            return document.getElementById(RadRotatorHorizontal);
        }
         //]]> 
    </script>
    <script type="text/javascript">
 
        //<![CDATA[
        function startRotator(clickedButton, rotator, direction) {
            if (!rotator.autoIntervalID) {
                refreshButtonsState(clickedButton, rotator);
                rotator.autoIntervalID = window.setInterval(function () {
                    rotator.showNext(direction);
                }, rotator.get_frameDuration());
            }
        }
 
        function stopRotator(clickedButton, rotator) {
            if (rotator.autoIntervalID) {
                refreshButtonsState(clickedButton, rotator)
                window.clearInterval(rotator.autoIntervalID);
                rotator.autoIntervalID = null;
            }
        }
 
        function showNextItem(clickedButton, rotator, direction) {
            rotator.showNext(direction);
            refreshButtonsState(clickedButton, rotator);
        }
 
        // Refreshes the Stop and Start buttons
        function refreshButtonsState(clickedButton, rotator) {
            var jQueryObject = $telerik.$;
            var className = jQueryObject(clickedButton).attr("class");
 
            switch (className) {
                case "start":
                    {// Start button is clicked
 
                        jQueryObject(clickedButton).removeClass();
                        jQueryObject(clickedButton).addClass("startSelected");
 
                        // Find the stop button. stopButton is a jQuery object
                        var stopButton = findSiblingButtonByClassName(clickedButton, "stopSelected");
 
                        if (stopButton) {// Changes the image of the stop button
                            stopButton.removeClass();
                            stopButton.addClass("stop");
                        }
 
                    } break;
                case "stop":
                    {// Stop button is clicked
 
                        jQueryObject(clickedButton).removeClass();
                        jQueryObject(clickedButton).addClass("stopSelected");
 
                        // Find the start button. startButton is a jQuery object
                        var startButton = findSiblingButtonByClassName(clickedButton, "startSelected");
                        if (startButton) {// Changes the image of the start button
                            startButton.removeClass();
                            startButton.addClass("start");
                        }
 
                    } break;
            }
        }
 
        // Finds a button by its className. Returns a jQuery object
        function findSiblingButtonByClassName(buttonInstance, className) {
            var jQuery = $telerik.$;
            var ulElement = jQuery(buttonInstance).parent().parent(); // get the UL element
            var allLiElements = jQuery("li", ulElement); // jQuery selector to find all LI elements
 
            for (var i = 0; i < allLiElements.length; i++) {
                var currentLi = allLiElements[i];
                var currentAnchor = jQuery("A:first", currentLi); // Find the Anchor tag
 
                if (currentAnchor.hasClass(className)) {
                    return currentAnchor;
                }
            }
        }
        //]]>
    </script>
 
       <table>
       <tr>
       <td class="style1">
        
                <div class="rotatatorLeftRightBack">
                    <telerik:RadRotator ID="RadRotatorHorizontal" runat="server" ScrollDuration="50"
                        RegisterWithScriptManager="true" Height="250px" Width="490px" RotatorType="FromCode"
                        ScrollDirection="Left" CssClass="floatRotator">
                        <ItemTemplate>
                            <div class="itemTemplate">
                                <%# XPath("Title") %>
                            </div>
                        </ItemTemplate>
                    </telerik:RadRotator>
 
                    <button onclick="$find('<%#RadRotatorHorizontal.ClientID%>').showNext(Telerik.Web.UI.RotatorScrollDirection.Left);"
                        type="button" class="left">
                    </button>
                    <button onclick="$find('<%#RadRotatorHorizontal.ClientID%>').showNext(Telerik.Web.UI.RotatorScrollDirection.Right);"
                        type="button" class="right">
                    </button>
 <a onclick='javascript:alert(getRotator());'>Testing</a>                      
 <a onclick='javascript:alert($find("RadRotatorHorizontal_ClientState"));'>jstest</a>;
 
  <ul id="navigationHorizontal" class="commandsWrapper">
  
                    <li><a href="#" onclick="stopRotator(this, $find('<%#RadRotatorHorizontal.ClientID%>')); return false;"
                        class="stopSelected" title="Stop"><span>Stop</span></a></li>
                    <li><a href="#" onclick="startRotator(this, $find('<%#RadRotatorHorizontal.ClientID%>'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
                        class="start" title="Start"><span>Start</span></a></li>
                    <li><a href="#" onclick="showNextItem(this, $find('<%#RadRotatorHorizontal.ClientID%>'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
                        class="left" title="Left"><span>Up</span></a></li>
                    <li><a href="#" onclick="showNextItem(this, $find('<%#RadRotatorHorizontal.ClientID%>'), Telerik.Web.UI.RotatorScrollDirection.Right); return false;"
                        class="right" title="Right"><span>Down</span></a></li>
                </ul>
                    </div>
 
        
       </td> 
       </tr>
       </table>
  
    </form>
 
     
</body>
</html>

4 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 25 May 2011, 02:07 PM
Hello Amber,

 The correct manner to get the client object is by using $find and code blocks as you initially tried but use = instead of # as shown below:

function GetRotator() {
            return $find('<%= RadRotatorHorizontal.ClientID %>');
        }


When you use the getElementById or $get methods you obtain a reference to the HTML element which represents the control and that is why you will get errors if you call control specific methods. In order to use the client-side API you should reference the client object which represents the control and this should be done by using the method $find. As to the code block (<%%>), it is used to dynamically evaluate ClientIDs when dealing with INaming Containers. Note, that referencing an ajax client object is general MS AJAX knowledge and it is not related directly to RadControls - keep this in mind for other ajax client objects, e.g for the AjaxControlsToolkit.

I hope that my reply is detailed enough and helpful, let me know how it goes.
 
All the best,
Svetlina
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
Moe
Top achievements
Rank 1
answered on 25 May 2011, 08:58 PM
If I use the = symbol then I get following error and site never resolves....

Server Error in '/' Application.

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

0
Accepted
Marin Bratanov
Telerik team
answered on 26 May 2011, 11:59 AM

Hello Amber,

This is a common error that is thrown by the framework when you use server code blocks inside the JavaScript, which is placed in the head tag with a runat="server" attribute.

What I would suggest is to wrap the script tag inside a RadCodeBlock control and then you can simply leave it inside the form tag.

For more information on the matter you can check the following links:



Kind regards,
Marin
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
Amber
Top achievements
Rank 1
answered on 27 May 2011, 04:03 PM
I changed page.databind() and page.header.databind() to this.databind() and this.header.databind() and the problem is gone.

Thanks for all your help.
AB
Tags
Rotator
Asked by
Amber
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Moe
Top achievements
Rank 1
Marin Bratanov
Telerik team
Amber
Top achievements
Rank 1
Share this question
or