Javascript Error for Slider in RadGrid

2 posts, 0 answers
  1. y0mbo
    y0mbo avatar
    5 posts
    Member since:
    Aug 2008

    Posted 04 Feb 2009 Link to this post

    I'm using a RadSlider inside of a RadGrid. When the user slides, I want to update an ASP:Label.
    This is similar to this example which I used as a basis:

    But when I do a postback, I get a JScript runtime error:
    "Microsoft JScript runtime error: 'clientValueChangeCoreCompetencyRadGrid_ctl00_ctl04_Emplo...' is undefined"

    In the debugger, it is on this code:
    Sys.Application.add_init(function() { 
        $create(Telerik.Web.UI.RadSlider, {"_decreaseText":"Decrease","_dragText":"Drag","_increaseText":"Increase","_skin":"Web20","_uniqueID":"CoreCompetencyRadGrid$ctl00$ctl04$EmployeeRatingSlider","_value":1,"clientStateFieldID":"CoreCompetencyRadGrid_ctl00_ctl04_EmployeeRatingSlider_ClientState","length":206,"maximumValue":6,"minimumValue":1,"selectionEnd":1,"selectionStart":1,"showDecreaseHandle":false,"showIncreaseHandle":false,"trackMouseWheel":false,"value":1}, {"valueChange":clientValueChangeCoreCompetencyRadGrid_ctl00_ctl04_EmployeeRatingSlider}, null, $get("CoreCompetencyRadGrid_ctl00_ctl04_EmployeeRatingSlider")); 

    I'm not sure what I'm doing wrong. Why would I get this error?

    Here is my .aspx page:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
    <html xmlns=""
    <head id="Head1" runat="server"
      <title>Untitled Page</title> 
      <form id="form1" runat="server"
      <asp:ScriptManager ID="ScriptManager" runat="server" /> 
      <script type="text/javascript"
        function updateRatingLabel(sliderValue, target) { 
          // kind of a hack 
          var values = new Array(); 
          values[1] = "Needs Rating"; 
          values[2] = "Not Rated"; 
          values[3] = "Lacking"; 
          values[4] = "Attaining"; 
          values[5] = "Excelling"; 
          values[6] = "Mastering"; 
          var target = document.getElementById(target); 
          target.innerHTML = values[sliderValue]; 
      <telerik:RadGrid ID="CoreCompetencyRadGrid" runat="server" AutoGenerateColumns="false" 
        CssClass="" EnableEmbeddedSkins="false" GridLines="none" Width="100%" OnItemDataBound="CoreCompetencyRadGrid_ItemDataBound" 
        OnNeedDataSource="CoreCompetencyRadGrid_NeedDataSource" SkinID="Grid"
        <GroupHeaderItemStyle /> 
          <GroupHeaderItemStyle /> 
          <ExpandCollapseColumn Visible="False"
            <HeaderStyle Width="19px" /> 
          <RowIndicatorColumn Visible="False"
            <HeaderStyle Width="20px" /> 
            <telerik:GridTemplateColumn HeaderText="Rating" UniqueName="Rating"
                <div style="margin: 0; height: 5px;"
                <div id="employeeSlider" runat="server"
                  <telerik:RadSlider ID="EmployeeRatingSlider" runat="server" Length="206" MinimumValue="1" 
                    MaximumValue="6" ShowDecreaseHandle="false" ShowIncreaseHandle="false" Skin="Web20" 
                    OnClientValueChange="clientValueChange" SlideStep="1" TrackMouseWheel="false" /> 
                  <asp:Label ID="employeeRatingLabel" runat="server" Style="">HELLO</asp:Label> 
      <asp:Button ID="Yo" runat="server" /> 

    And the code behind:
    using System; 
    using System.Data; 
    using System.Configuration; 
    using System.Collections; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Web.UI.HtmlControls; 
    using Telerik.Web.UI; 
    public partial class Default : System.Web.UI.Page 
      protected void CoreCompetencyRadGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e) 
        string[] data = new String[5] { "a""a""a""a""a" }; 
        CoreCompetencyRadGrid.DataSource = data; 
      protected void CoreCompetencyRadGrid_ItemDataBound(object sender, GridItemEventArgs e) 
        if (e.Item is GridDataItem) 
          GridDataItem dataItem = e.Item as GridDataItem; 
          RadSlider ratingSlider = (RadSlider)dataItem.FindControl("EmployeeRatingSlider"); 
          ratingSlider.OnClientValueChange = "clientValueChange" + ratingSlider.ClientID; 
          Label ratingLabel = (Label)e.Item.FindControl("employeeRatingLabel"); 
          string jsfunction = "function " + ratingSlider.OnClientValueChange + "(obj,args){updateRatingLabel(obj.get_value(),'" + ratingLabel.ClientID + "');};"
          Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Script" + ratingSlider.ClientID, jsfunction, true); 

  2. Tsvetie
    Tsvetie avatar
    1517 posts

    Posted 09 Feb 2009 Link to this post

    Hi John,
    The problem is in the way you register the ClientValueChange handler for each RadSlider. When you click the button and thus initiate a postback, your code in the CoreCompetencyRadGrid_ItemDataBound will not be executed as the RadGrid is already bound. Thus, you will not register the client script and all ClientValueChange handlers are lost. As you do not have those defined after the postback, the initialization of all RadSliders will fail.

    Having said that, you need to find a way to define all ClientValueChange handlers so that those will be available after postback and callback. For example - define one handler for all RadSliders and based on the ClientID of the RadSlider, find the corresponding Label.

    In case you would like to use your approach, that is, define a different handler for each slider, you can use the ItemCreated event, instead of the ItemDataBound event, as it is raised after postback as well.

    Best wishes,
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top