It recently came to my attention that there is no good documentation on the Telerik website showing you how to create a RadRotator (with a defined template) programmatically. There is some documentation out there showing you how to programmatically data bind a RadTicker, and the RadControls Learning Guide has some good guidance, but nothing exists online for easy Rotator reference. Let's solve that problem and take a quick look at how you can programmatically create your RadRotator and template.

Step 1: Define your template
Defining a template for RadRotator in code is very similar to the process involved in programmatically creating a template for RadGrid. Basically, you just need to create a class that implements ITemplate and that renders controls where you want them. The complexity of your template class depends entirely on how many controls you render and how many of them need to be data bound, but with basic knowledge you can scale the principles involved to handle any situation.

In today's demo, we want to create a RadRotator in code that rotates through a collection of images. To do that, we need to create a template class that renders an Image control and bind the ImageURL to our data source. The basic shell of our template will look something like this:

To begin working with our new class, we can use Visual Studio's helpful template implementer by right-clicking on "ITemplate" and selecting "Implement interface", like this (C# only, VB will automatically implement the interface if you hit the tab key after adding it):

After you select "Implement Interface", Visual Studio will automatically add the methods to your class that need to exist for you to completely satisfy the interface's contract. Each method stub will also contain a "throw" statement that will cause an exception if you do not manually add some logic to each method's body. With the interface implemented, our class now looks like this:

Now we need to add some "real" code to the InstantiateIn method. This is were we define and layout the controls that we want to display in our template. In this demo, we simply need to add a single Image control, but you could anything here (like new tables, divs, server controls, etc.). For completeness, we'll render our Image control in an HTML div, producing code that looks like this:

Nothing in this code should be too tricky, but the important line to look at in more detail is the DataBinding. Here you define a new EventHandler that will fire whenever the template needs to bind your control to your RadRotator's data source. Every control that you add to your template that needs to be bound to data needs to follow this same approach. The data binding method for this demo will look like this:

Here's where things get a little more specific to RadRotator. Notice in the above code snippet that we have to get a reference to the RadRotatorFrame that contains our data bound Image control. To do that, we reference the Image control's NamingContainer and store it in a local variable. With the reference to the RotatorFrame in hand, we finally have access the the DataItem for the current Rotator frame that we can use to data bind our control. The DataItem type depends entirely on your data source. If your RadRotator data source is an array of strings, the DataItem will be of type String. If the data source is a DataTable, your DataItem type will probably be DataRowView. This is an important thing to keep in mind when working with a Rotator programmatically and databinding to different data source types.

Step 2: Define your RadRotator
Now that you have a programmatic Rotator template defined, the next (and final) step is to define your RadRotator. This is usually done in a page's PageLoad method, but you can do it wherever you're defining the controls that should be rendered at runtime (if it's a WebPart, for instance, this may be the CreateChildControls method). You can define a wide range of properties when you create your Rotator, but for this demo we'll accept most of the control's default settings and focus on the code that is required to data bind our control. In the PageLoad method, we'll add the following code:

You can see that we set the FrameTemplate property to a new instance of our RadRotatorTemplate to define our Rotator's template. If you are binding to a data source that requires dynamic input in the template (such as column names), you can add code the RadRotatorTemplate constructor to accept those values and make them available to the class' data binding methods. In this case, our data binding is simple and we simply create an array of image paths in the "CreateRotatorData" method:

And that's it! When you run your page, the RadRoator will be displayed and the template area will bind controls in each Rotator frame to your data source. In general, that means one frame will be rendered per "row" (or entry) in your data source.

With this simple example, you should be able to confidently add RadRotators via code anywhere you need them and no longer feel constrained to design-time only solutions. If you want to see another example of creating templates programmatically, check out page 584 in the RadControls Learning Guide. The Learning Guide example binds the Rotator to a DataTable, so it is a good next step if you're comfortable with the code in this demo.

Download demo project in C#
Download demo project in VB
About the Author

Todd Anglin

is an avid HTML5, CSS3, and JavaScript advocate, and geek about all things web development. He is an active speaker and author, helping developers around the world learn and adopt HTML5. Todd works for Telerik as VP of HTML5 Web & Mobile Tools, where his current technical focus is on Kendo UI. Todd is @toddanglin on Twitter

Related Posts


Comments are disabled in preview mode.