I keep getting null on RadRotator control

5 posts, 1 answers
  1. Amber
    Amber avatar
    13 posts
    Member since:
    May 2011

    Posted 24 May 2011 Link to this post

    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>
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 25 May 2011 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Moe
    Moe avatar
    1 posts
    Member since:
    May 2011

    Posted 25 May 2011 Link to this post

    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.

  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 26 May 2011 Link to this post

    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.

  6. Amber
    Amber avatar
    13 posts
    Member since:
    May 2011

    Posted 27 May 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017