Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

03 Oct 11 14 - How to dynamically display a style in a repeater control

Posted on 2011-09-27
11
Medium Priority
?
242 Views
Last Modified: 2012-05-12
I'm trying to dynamically display a style in a repeater control from code behind. If the record is the first one, then display a style, otherwise, hide the style.

My aspx page:
<asp:Repeater ID="rptrA" runat="server">
    <ItemTemplate>
        <div id="divHeader" runat="server">
            <asp:Label ID="lblRegion" runat="server"></asp:Label>
        </div>
    </ItemTemplate>
</asp:Repeater>

C# Code:

System.Web.UI.HtmlControls.HtmlGenericControl divHeader= new System.Web.UI.HtmlControls.HtmlGenericControl("divHeader");

if (intRegion == 1)
{
divHeader.Attributes.Add("class", "header");
}
else
{
//do nothing
}

I have also tried to use the following code samples, and none of them worked:
divHeader.Visible = true;
divHeader.Attributes["class"] = "header";

Please help.
0
Comment
Question by:suebarner
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
11 Comments
 
LVL 60

Expert Comment

by:HainKurt
ID: 36710845
use jQuery to make your life easy


<asp:Repeater ID="rptrA" runat="server">
    <ItemTemplate> 
        <div>
            <asp:Label ID="lblRegion" runat="server"></asp:Label>
        </div>
    </ItemTemplate>
</asp:Repeater>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
	nDiv = $("#<%=rptrA.ClientID%>:first").addClass("header");
});
</script>

Open in new window

0
 
LVL 60

Expert Comment

by:HainKurt
ID: 36710888
if you do not want to use jQuery, something like this will work (may have some syntax issues :)
int ix = 0;
void rptrA_ItemCreated(Object Sender, RepeaterItemEventArgs e) {
  if (e.Item.ItemType==ListItemType.Item) {
    ix++;
    if (ix==1) {
      Control myDiv = e.item.findcontrol("lblStatus");
      myDiv.cssClass="header";
      myDiv.Attributes["class"] = "header";
    }
  }
}

Open in new window

0
 
LVL 60

Expert Comment

by:HainKurt
ID: 36710899
what does this mean "display/hide style" ?

you want to display that div on first iteration? then use header template of repeater...
0
Prepare for your VMware VCP6-DCV exam.

Josh Coen and Jason Langer have prepared the latest edition of VCP study guide. Both authors have been working in the IT field for more than a decade, and both hold VMware certifications. This 163-page guide covers all 10 of the exam blueprint sections.

 

Author Comment

by:suebarner
ID: 36711003
Hi HainKurt,
The style is associated with some background images, and I'd only need to display it once.  The application is to display a list of products based on region.  For each region, I only display the header for the first record, and hide the rest of them.

0
 
LVL 60

Expert Comment

by:HainKurt
ID: 36711606
how do you populate repeater? why not you create a table  


<table>
<tr><td>header here<td></tr>
<asp:repeater>
<ItemTemplate> 
        <tr><td>
            detail here
        </td></tr>
    </ItemTemplate>
</repeater>
</table>

Open in new window

0
 
LVL 4

Expert Comment

by:manishkungwani
ID: 36712223
IT can be done using just the repeater, without the extra tables and divs.
Use the HeaderTemplate in a repeater:

<asp:repeater>
    <HeaderTemplate> 
header content here
    </HeaderTemplate>
    <ItemTemplate> 
items here
    </ItemTemplate>
    <FooterTemplate> 
footer content here
    </FooterTemplate>
</repeater>

Open in new window


Do let me know, if you need more guidance on the same..
0
 
LVL 60

Expert Comment

by:HainKurt
ID: 36712291
"IT can be done using just the repeater, without the extra tables and divs."

I used table just to make sure they show properly on page, not like garbage :)

using template, my sample will be
<asp:repeater>
    <HeaderTemplate> 
<table>
<tr><td>header here<td></tr>
    </HeaderTemplate>
    <ItemTemplate> 
<tr><td>detail here</td></tr>
    </ItemTemplate>
    <FooterTemplate> 
</table>
    </FooterTemplate>
</repeater>

Open in new window

0
 
LVL 4

Expert Comment

by:manishkungwani
ID: 36712382
No offense meant :)
Its just that using tables, just for styling isn't appropriate, also, do remember that ultimately the repeater will also generate HTML which will look similar to a table. So using tables again when the control is already doing it for you, is repetitive.
And one of the golden rules, keep it simple and remove whatever is not needed.
Again, its just my personal opinion.:)
0
 

Accepted Solution

by:
suebarner earned 0 total points
ID: 36719704
I replaced <div> tag with <asp:panel> and everything works fine.  Thank you all.
0
 

Author Closing Comment

by:suebarner
ID: 36902280
it works!
0
 

Author Comment

by:suebarner
ID: 36719719
good
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my previous two articles we discussed Binary Serialization (http://www.experts-exchange.com/A_4362.html) and XML Serialization (http://www.experts-exchange.com/A_4425.html). In this article we will try to know more about SOAP (Simple Object Acces…
This document covers how to connect to SQL Server and browse its contents.  It is meant for those new to Visual Studio and/or working with Microsoft SQL Server.  It is not a guide to building SQL Server database connections in your code.  This is mo…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question