Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rotator > Set CSS class to highlight item

• KDL

  Posted on Nov 16, 2011 (permalink)

  Hi,
  
  I'm trying to set the CSS class of a particular item in the rotator from code behind based on a value I obtain from the database. The following code does set the class but it sets it for a nested div and that's too deep. I need to set it on the <li> generated by the RadRotator for this item.
  

  Private Sub RadRotator1_ItemDataBound(sender As Object, e As Telerik.Web.UI.RadRotatorEventArgs) Handles RadRotator1.ItemDataBound

  If IsFeatured Then

  e.Item.Attributes.Add("class", "featured")

  End If

  End Sub

  
  The generated HTML looks like this:
  

  <div class="rrRelativeWrapper">

      <div class="rrClipRegion">

          <ul class="rrItemsList">

              <li class="rrItem">

                  <div id="ctl00_..._RadRotator1_i0" class="featured">

  
  I need my "featured" class to be injected in the <li> just above. How can I accomplish this? (Or am I going about it the wrong way?). Thanks!

  Reply

• Princy MVP

  Posted on Nov 17, 2011 (permalink)

  Hello,
  
  You can try the following code snippet.
  VB:
  

  Protected Sub RadRotator1_ItemDataBound(sender As Object, e As RadRotatorEventArgs)

      Dim itm As RadRotatorItem = TryCast(e.Item, RadRotatorItem)

      Dim lbl1 As Label = TryCast(itm.FindControl("lbl"), Label)

      If lbl1.Text = "Alex" Then

          itm.CssClass = "cssitem"

      End If

  End Sub

  
  Thanks,
  Princy.

  Reply


• KDL

  Posted on Nov 17, 2011 (permalink)

  Thanks Princy, but that put the class at the same level again. Turns out it's equivalent to what I had (but more direct, using the CssClass property so good idea). So I'm still stuck on this one. I think I may need to generate JavaScript to find the parent <li> and add my class that way, just seems like there should be an easier way.
  

  Reply

• Answer Slav Slav

  Posted on Nov 21, 2011 (permalink)

  Hi Kent,
  
  Indeed, in order to apply a custom CSS class to the rendered li HTML element of the RadRotator, you should utilize the Client API of the control. I have attached a sample project, implementing the suggested solution. Note that I have set the index of the modified item statically and in your actual project you will have to get it from the code behind, which can be achieved via hidden field for example.
  
  Please use the attached sample as a reference for your further development. Don't hesitate to contact us again if you encounter more difficulties.
  
  Greetings,
  Slav
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Attached files

  • RadRotatorDemo.zip

  Reply

• KDL

  Posted on Nov 21, 2011 (permalink)

  Slav, thank you very much for the great demo and explanation. Exactly what I needed.
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rotator > Set CSS class to highlight item