Some Client-Side Telerik Sweetness

One of the many great things about the Telerik controls is their easy-to-use client side API.
I recently had to write some javascript to do that thing where you are filling in your address details, and you check a box to copy your street address to your postal address (to save the user from typing their address details out again). I also had to change the colour of the postal address if the user clicked another checkbox. Filtering out the insignificant code, it looked something like this:

string chkAddressScript = string.Format(
                    string.Concat(
                        @"function copyAddress() {{",
                        ...
                        @"var postState = document.getElementById('{5}_Input');",
						...
						@"var resState = document.getElementById('{11}_Input');",						
						...
                        @"}}"), ..., PersonDetailsControls.FindControl("drpPostAddrState").ClientID,
                        ..., PersonDetailsControls.FindControl("drpResidentialState").ClientID,
                        ...);
this.Page.ClientScript.RegisterClientScriptBlock(this.Page.GetType(), "chkAddressScript", chkAddressScript, true);

The trick here is to get a hook on the dom element for the Telerik control’s input part by using the _Input suffix. You can then easily change it’s colour with:

	var resState = document.getElementById('<% PersonDetailsControls.FindControl("drpPostAddrState").ClientID %>');,	
	resState.style.color = 'red';,					

Aint it just grand!

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>