Solved

change colour of repeater control in asp.net c#

Posted on 2016-09-30
7
85 Views
Last Modified: 2016-10-10
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>
0
Comment
Question by:satmisha
  • 4
  • 2
7 Comments
 
LVL 40

Expert Comment

by:Kyle Abrahams
ID: 41823755
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
 
LVL 21

Expert Comment

by:Tapan Pattanaik
ID: 41823827
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
 

Author Comment

by:satmisha
ID: 41825897
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:satmisha
ID: 41825902
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
 

Author Comment

by:satmisha
ID: 41826139
Experts could you please suggest ?
0
 
LVL 40

Accepted Solution

by:
Kyle Abrahams earned 500 total points
ID: 41828910
make both 100%.
0
 

Author Closing Comment

by:satmisha
ID: 41837020
Awesome man. Thank you so much.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The goal of this video is to provide viewers with basic examples to understand and use pointers in the C programming language.
The goal of this video is to provide viewers with basic examples to understand and use conditional statements in the C programming language.

776 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