[Solved] Control Disappears on Client Side Event Call

[Christopher]

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

[Slav]

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