Control Disappears on Client Side Event Call

2 posts, 0 answers
  1. Christopher
    Christopher avatar
    1 posts
    Member since:
    Jul 2013

    Posted 09 Jul 2013 Link to this post

    I am trying to add a RadSlider to ascx page. I'm really new to using Telerik and using javascript. Adding the RadSlider to the form works perfect except when I want to call a javascript function to change a text box to the value of the RadSlider. The RadSlider disappears, but seems to be present because the tooltip still shows when hovering over the aread where the RadSlider should be. Just adding the words "OnClientValueChanged="... makes the RadSlider not visible on the page anymore. Any help would be greatly appreciated. This has been driving me crazy for the past two weeks.

    The RadSlider control that I am having trouble with is called DefaultScoreRadSlider

    Here is the code that I am working on:

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="CtrlCreateInterviewQuestionListItem.ascx.vb" Inherits="IH_WebSite.CtrlCreateInterviewQuestionListItem" %>
     
    <%@ Register Src="~/Controls/ctrlInterviewQuestionOptionNextQuestion.ascx" TagName="ctrlInterviewQuestionOptionNextQuestion" TagPrefix="uc1" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <style type="text/css">
        .auto-style2 {
            width: 14px;
        }
     
        .auto-style3 {
            width: 310px;
        }
     
        .auto-style4 {
            width: 67px;
        }
     
        .auto-style5 {
            width: 800px;
        }
    </style>
     
    <script type="text/javascript" id="telerikClientEvents1">
        //<![CDATA[
     
        function DefaultValueRadSlider_ValueChanged(sender, args) {
            DefaultValueRadSliderRepaint(sender, args);
            $get("TbxScore").value = sender.get_value();
        }
     
        //]]>
    </script>
     
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"></asp:ObjectDataSource>
     
    <asp:HiddenField ID='HfEditMode' runat='server' />
    <table class="auto-style3">
        <tr>
            <td class="auto-style4">
                <asp:Literal ID="LITIndex" runat="server"></asp:Literal></td>
            <td colspan='3' style='text-align: right;'>
                <asp:Repeater ID='RPTResources' runat='server'>
                    <HeaderTemplate>
                        <ul style="list-style-type: none; display: inline; margin-left: auto;">
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li style="display: inline">
                            <asp:Image ID="Image2" runat="server" ImageUrl='<%# "~/Graphics/Icon/IH_" & DataBinder.Eval(Container.DataItem, "Type").ToString() & "_Dark_24.png" %>' /></li>
                    </ItemTemplate>
                    <FooterTemplate></ul></FooterTemplate>
                </asp:Repeater>
                <asp:Image ID="ImgClock" runat="server" ImageUrl="~/Graphics/Icon/clock_24.png" Visible="false" /></td>
        </tr>
        <tr>
            <td colspan='3' style='max-width: 600px'>
                <asp:Literal ID="LITName" runat="server"></asp:Literal></td>
            <td rowspan='' class="auto-style2"></td>
        </tr>
        <tr>
            <td colspan='2'></td>
            <asp:Repeater ID='RPTNextQuestion' runat='server'>
                <HeaderTemplate></HeaderTemplate>
                <ItemTemplate>
                    </tr><tr>
                        <td colspan='1'><%# DataBinder.Eval(Container.DataItem, "Text")%></td>
                        <td>
                            <uc1:ctrlInterviewQuestionOptionNextQuestion ID='cIQONQ' runat='server' NextQuestion='<%# DataBinder.Eval(Container.DataItem, "NextQuestionID") %>' NumQuestions='<%# NumQuestions %>' CommandName='changed' CommandArgument='<%# Container.DataItem %>' CurrentQuestion='<%# DataBinder.Eval(Container.DataItem, "QuestionID") %>' OptionIndex='<%# DataBinder.Eval(Container.DataItem, "ID") %>' EditMode='<%# EditMode %>' />
                        </td>
                        <td>
                            <asp:TextBox ID='TbxScore' runat='server' Width='50px' Text='<%# DataBinder.Eval(Container.DataItem, "score") %>' CommandName='score' CommandArgument='<%# Container.DataItem %>' AutoPostBack="True" ValidationGroup='<%# DataBinder.Eval(Container.DataItem, "ID") %>' Visible='<%# EditMode %>'></asp:TextBox></td>
                        <td>
                            <asp:Literal ID='LblScore' runat='server' Text='<%# DataBinder.Eval(Container.DataItem, "score") %>' Visible='<%# Not EditMode %>'></asp:Literal></td>
                        <td>
                            <telerik:RadSlider ID="DefaultScoreRadSlider" runat="server" MaximumValue="100" MinimumValue="-100" Value='<%# DataBinder.Eval(Container.DataItem, "score") %>' ToolTip="Slide to set score value" Width="215px" AutoPostBack="False"></telerik:RadSlider>
                        </td>
     
     
                </ItemTemplate>
                <FooterTemplate></FooterTemplate>
            </asp:Repeater>
            <td style='text-align: right;' class="auto-style2">
                <asp:Repeater ID='Repeater1' runat='server'>
                    <HeaderTemplate>
                        <ul style="list-style-type: none; display: inline; margin-left: auto;">
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li style="display: inline">
                            <asp:Image ID="Image2" runat="server" ImageUrl='<%# Container.DataItem %>' /></li>
                    </ItemTemplate>
                    <FooterTemplate></ul></FooterTemplate>
                </asp:Repeater>
            </td>
        </tr>
    </table>

    Thank you,

    Chris
  2. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 11 Jul 2013 Link to this post

    Hi Christopher,

    By default the rendering of RadSlider is created on the client, so the control is most probably missing because there is a JavaScript error that breaks its client-side object. Since it occurs only when you attach a handler for the slider's event, I would suggest checking whether you have set only the handler function name in the property OnClientValueChanged as shown in this help article.

    You can also ensure that the function DefaultValueRadSliderRepaint does not throw an error when executed.

    Regards,
    Slav
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top