This is a migrated thread and some comments may be shown as answers.

Javascript Error for Slider in RadGrid

1 Answer 154 Views

Slider

This is a migrated thread and some comments may be shown as answers.

y0mbo asked on 04 Feb 2009, 09:39 PM

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:
http://www.telerik.com/community/forums/aspnet-ajax/slider/slider-inside-a-repeater-control.aspx

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head id="Head1" runat="server"> 
        
              <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
              <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]; 
        
                } 
        
              </script> 
        
              <telerik:RadGrid ID="CoreCompetencyRadGrid" runat="server" AutoGenerateColumns="false" 
        
                CssClass="" EnableEmbeddedSkins="false" GridLines="none" Width="100%" OnItemDataBound="CoreCompetencyRadGrid_ItemDataBound" 
        
                OnNeedDataSource="CoreCompetencyRadGrid_NeedDataSource" SkinID="Grid"> 
        
                <GroupHeaderItemStyle /> 
        
                <MasterTableView> 
        
                  <GroupHeaderItemStyle /> 
        
                  <ExpandCollapseColumn Visible="False"> 
        
                    <HeaderStyle Width="19px" /> 
        
                  </ExpandCollapseColumn> 
        
                  <RowIndicatorColumn Visible="False"> 
        
                    <HeaderStyle Width="20px" /> 
        
                  </RowIndicatorColumn> 
        
                  <Columns> 
        
                    <telerik:GridTemplateColumn HeaderText="Rating" UniqueName="Rating"> 
        
                      <ItemTemplate> 
        
                        <div style="margin: 0; height: 5px;"> 
        
                        </div> 
        
                        <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" /> 
        
                        </div> 
        
                        <div> 
        
                          <asp:Label ID="employeeRatingLabel" runat="server" Style="">HELLO</asp:Label> 
        
                        </div> 
        
                      </ItemTemplate> 
        
                    </telerik:GridTemplateColumn> 
        
                  </Columns> 
        
                </MasterTableView> 
        
              </telerik:RadGrid> 
        
              <asp:Button ID="Yo" runat="server" /> 
        
              </form> 
        
            </body> 
        
            </html>

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); 
        
                } 
        
              } 
        
            }

(v2.0.50727)

1 Answer, 1 is accepted

answered on 09 Feb 2009, 12:56 PM

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,
Tsvetie
the Telerik team

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