change colour of repeater control in asp.net c#

Hi experts,

I need blue colour in background of repeater control. I am using repeater cntrl like below. But unable to change the background colour.

Can you please suggest what is the best way to achieve that ?


 <asp:Repeater ID="rptPagerHeader" runat="server">
                                  <ItemTemplate>
                                        <asp:LinkButton ID="lnkPageHeader" runat="server" Text = '<%#Eval("Text") %>' CommandArgument = '<%# Eval("Value") %>' Enabled = '<%# Eval("Enabled") %>' OnClick = "Page_ChangedHeader"></asp:LinkButton>
                                    </ItemTemplate>                                                      
                   </asp:Repeater>
satmishaAsked:
Who is Participating?
 
Kyle AbrahamsConnect With a Mentor Senior .Net DeveloperCommented:
make both 100%.
0
 
Kyle AbrahamsSenior .Net DeveloperCommented:
surround the repeater in a div and set the background of the div to blue.  then anything inside the div (eg: repeater and all controls) will also have a blue background unless there's a higher priority style rule.
0
 
Tapan PattanaikSenior EngineerCommented:
HI satmisha,

Please check the sample below code. For change the background colour you have to add color in <td>

            <asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate>
                    <table>
                        <tr>
                            <td style="background-color: Gray; width: 100px;">Id</td>
                            <td style="background-color: Gray; width: 100px;">Name</td>
                            <td style="background-color: Gray; width: 100px;">Age</td>
                            <td style="background-color: Gray; width: 100px;">Salary</td>
                            <td style="background-color: Gray; width: 100px;">Country</td>
                            <td style="background-color: Gray; width: 100px;">City</td>
                        </tr>
                    </table>
                </HeaderTemplate>
                <ItemTemplate>
                    <table>
                        <tr>
                            <td style="background-color: blue; width: 100px;">
                                <asp:Label ID="lblId" runat="server" Text='<%#Bind("id")%>'></asp:Label>
                            </td>
                            <td style="background-color: blue; width: 100px;">
                                <asp:Label ID="lblName" runat="server" Text='<%#Bind("name")%>'></asp:Label>
                            </td>
                            <td style="background-color: blue; width: 100px;">
                                <asp:Label ID="lblAge" runat="server" Text='<%#Bind("age")%>'></asp:Label>
                                <td style="background-color: blue; width: 100px;">
                                    <asp:Label ID="lblSalary" runat="server" Text='<%#Bind("salary")%>'></asp:Label>
                                </td>
                                <td style="background-color: blue; width: 100px;">
                                    <asp:Label ID="lblCountry" runat="server" Text='<%#Bind("country")%>'></asp:Label>
                                    <td style="background-color: blue; width: 100px;">
                                        <asp:Label ID="lblCity" runat="server" Text='<%#Bind("city")%>'></asp:Label>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:Repeater>

Open in new window


Regards,
Tapan Pattanaik
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
satmishaAuthor Commented:
Thanks Tapan,

TD colour suggestion worked but getting one small issue i.e. width of the td which is in repeater control is not same as that of grid columns as depicted in the attachment , could you please suggest that width of both of them should remain same
AlignmentIssue.docx
0
 
satmishaAuthor Commented:
Provided below is the code I have been using where getting issue of alignment:

 <Data:GridView ID="GridView1" runat="server" AllowSorting="True"
                AutoGenerateColumns="False" CellPadding="4" EnabledDuringCallBack="False" ForeColor="#333333"
                GridLines="None" PageSize="1" Font-Overline="False" Font-Size="X-Small"  AutoUpdateAfterCallBack="True" Width="98%"  CssClass="scroll-grid"
                UpdateAfterCallBack="True" PreCallBackFunction="disablegrid" PostCallBackFunction="enablegrid"  >
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <EmptyDataTemplate>
                    <anthem:Label ID="lblEmpty" runat="server" Text="No Locations found"></anthem:Label>
                </EmptyDataTemplate>
                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
                <EditRowStyle BackColor="#2461BF" />
                <PagerStyle BackColor="#2461BF" ForeColor="White"  HorizontalAlign="Center" />
                <AlternatingRowStyle BackColor="White" />
                <Columns>
                    <asp:TemplateField ShowHeader="False">
                        <ItemTemplate>
                            <anthem:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit1" CommandArgument="<%#                         ((GridViewRow) Container).RowIndex %>"
                                PostCallBackFunction="hidewait" EnableCallBack="True" EnabledDuringCallBack="False">Edit</anthem:LinkButton>&nbsp;
                            <anthem:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Remove"
                                PostCallBackFunction="
                                hidewait" EnableCallBack="False" EnabledDuringCallBack="False">Remove</anthem:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <PagerSettings Mode="NumericFirstLast" Position="TopAndBottom" />
                <RowStyle BackColor="#EFF3FB"  />
            </Data:GridView>
0
 
satmishaAuthor Commented:
Experts could you please suggest ?
0
 
satmishaAuthor Commented:
Awesome man. Thank you so much.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.