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:
I'm not sure what I'm doing wrong. Why would I get this error?
Here is my .aspx page:
And the code behind:
(v2.0.50727)
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)