For that, the RadControls provide a very robust client-side API. In fact, most methods and properties available in the server-side API are available under the same (or very similar) names on the client. That means you can increasingly do more of your programming on the client (moving data with web services) and rely less on the “heavy” server-centric model.
There are a couple of key concepts that you must understand to make this undocumented approach to changing RadTicker content work:
- RadTickerItems are rendered as SPAN tags in a parent "itemContainer" SPAN. The RadTicker object simply rotates through displaying the content of all child SPANs in the itemContainer. Removing or adding SPANs to this collection allows you to change RadTicker's contents.
- Related, the RadTicker object looks for specific SPAN IDs when rotating through items. Specifically, each TickerItem SPAN must have the ID "RadTicker1_i2"- where "RadTicker1" is the control's ClientID and "2" is the "index" of the item in the list of TickerItem SPANs.
Expressed in in code, this is how a basic RadTicker with three RadTickerItems renders on the page:
<span id="RadTicker1" style="display:inline-block;height:30px;width:400px;"> <span id="RadTicker1_itemsContainer" style="display:none;"> <span id="RadTicker1_i0">This is ticker item 1</span> <span id="RadTicker1_i1">Ticker item 2 is this</span> <span id="RadTicker1_i2">Finally, Ticker item 3</span> </span> <input id="RadTicker1_ClientState" name="RadTicker1_ClientState" type="hidden" /> </span>
//Get reference to RadTicker and text input var ticker = $find('RadTicker1'); var container = ticker._getChildElement("itemsContainer"); var index = container.childElementCount; //Create new SPAN - this will be our new Ticker item var newElement = document.createElement("span"); newElement.setAttribute("id", 'RadTicker1_i'+ index); newElement.innerHTML = txtEle.value; $(newElement).appendTo(container); //Tell RadTicker to recalculate number of Ticker items ticker.set_numberOfItems($telerik.getChildrenByTagName(ticker._itemsContainer, "span").length)
Using this same basic pattern, we can easily expand on this example to also replace ticker items and bind ticker items to web service data. Check out a live running example showing this client-side approach for appending, replacing, and web service binding RadTicker.
NOTE: This is an undocumented client-side approach. RadTicker may (and probably will) provide a better API for doing this in the future. Use this approach in the mean time if you need to change RadTicker on the fly. Also note, if you do POST the page, your client-side changes will be lost.
Hopefully this tip will help you fully embrace client-side programming in your rich, standards-based web applications. The fully-commented code for this live demo is available for download below. Enjoy!