How to set class on div that is inside of repeater in code behind?


Tags: c#,asp.net,html,css

Problem :

CSS & html

id0 is the class for the div that's got background as a sprite image and inside of this div..there's a list of links (in repeater)..when the user hovers over links..the background image of div displays diff parts of sprite image accordingly

Now I want that the classes id1 to id5 be set as the classes of the repeater's list...now how do I go abut it?

like the list of links inside of repeater is coming from the DB..how do I create div tags inside of this repeater

and how do I set the class for each of the 5 divs that will be created and set these classes on them ?

like earlier I had simple markup but now I have to generate that list of links using a repeater..so how do I apply the CSS now ??

Please give some ideas..thnx

[EDIT] ok tried this.. added div tag in repeater after label and in code behind :- rpt1.FindControl("myDiv").Controls.Add(class= ??) //what to type here use for loop or what ? [edit] this doesnt work..whats wrong ?**

for(int i=1;i<6;i++)
                {
            rpt1.FindControl("myDiv").Controls.Add("class=id[i]");

            }

The above's giving the following error:-

The best overloaded method match for 'System.Web.UI.ControlCollection.Add(System.Web.UI.Control)' has some invalid arguments

Now how do I set classes for the divs?

pch..made dilly mistake..made changes ..

 for (int i = 1; i < 6; i++)
                    {
                        string divClass = "id";
                        rpt1.FindControl("myDiv").Controls.Add("class=id" + i);

                    }

still the same error..

[edit]

tried the following..doesnt work

rpt1.FindControl("myDiv").Attributes.Add("class","id" +i);

[edit]

I tried the following now..

rpt1.FindControl("myDiv").Attributes["class"] = "id" + i;

it says "Cannot apply indexing with [] to an expression of type 'method group'" ???



Solution :

The ItemDataBinding way

In order to get hold of an element inside the repeater's ItemTemplate you have to declare it runat="Server" and set an id for it (id isn't really neccessary, but simplifies things). If you do that with your div you can get it inside your ItemDataBound event and set the class.

void Repeater_ItemDataBound(Object Sender, RepeaterItemEventArgs e) {
  if (e.Item.ItemType == ListItemType.Item
    || e.Item.ItemType == ListItemType.AlternatingItem)   
  {
    ((HtmlGenericControl)(e.Item.FindControl("myDiv"))).
       Attributes["class"] = "id" + index++;
  }
}

You need to declare the index variable and increment it as you set each class.


Alternative way

An even simpler and cleaner way IMHO is to set the class directly in the View using data binding

<asp:Repeater ID="rpt" runat="server">
  <ItemTemplate><div class="<%# GetDivClass() %>">a div</div></ItemTemplate>
</asp:Repeater>

and in the code behind declare the method for getting the data

private int index = 1;

protected string GetDivClass()
{
  return "div" + index++;
}

    CSS Howto..

    How to change CSS portrait to landscape in iphone?

    How to use CSS on autocomplete textbox selected values

    How to dynamically pass variables from HTML to CSS [closed]

    How to apply multiple css transform properties using Jquery

    How show button hovering above an image or pressing over it? [closed]

    How to make multiple divs always fill out the whole browser size?

    How can I make the header's border/other content not overlap the img on the left?

    How to change comma separated css values with Jquery.css Method?

    :hover property overriden after jquery effect, how to get it back?

    js Find Class Within Div + toggle CSS/Hide One Show Other

    How to avoid IE11 “slow” evaluation of CSS :invalid and :valid pseudo selectors

    How can I mimic Leaflet.Draw tooltip style with a different tooltip plugin?

    How to change CSS background-position for the X axis only? [duplicate]

    How to add css loading animation in ajax beforeopen page

    How do i place 4 headers from 1 div next to each other?

    How can we control the size of a special character?

    How to style a list within a menu?

    jquery - How to determine if a div changes its height or any css attribute?

    How to apply CSS class to a parent element?

    How to make slanted CSS arrow pointing to a div

    How to control a

    Inheriting CSS how do I stop it?

    How to create transparent background color in html & css [duplicate]

    How to include PHP code in CSS?

    How to center an iframe, responsive

    using percentages for css text - how do i stop inheritance of font-size from parent

    How to hide div on swipe in Angular

    CSS check box, how to make an item unchecked only if another one is checked

    how to hide submenus in jquery menu

    How to scale a website for mobile devices?