how to change background color of selected item in repeater?

Question

0.00/5 (No votes)

See more:

Hi,
I want that change background color of div base on user selected this item or no.
this is my code:

ASP.NET

<asp:Repeater ID="rptRss" runat="server">
    <HeaderTemplate>
         <div id="rptRssHeader">
             <div class="RepeaterDivs" style="width:5%;">
                 <asp:Label ID="RptHRssAllowVisible" runat="server" Text="Allow Visible"></asp:Label>
             </div>
             <div class="RepeaterDivs" style="width:5%;">
                 <asp:Label ID="RptHRssEdit" runat="server" Text="Edit RSS"></asp:Label>
             </div>
             <div class="RepeaterDivs" style="width:5%;padding-removed 9px;">
                 <a id="RptHRssDeleteLink" href="Default.aspx?FinalDelRss=true" >
                    <asp:Image ID="RptHRssDeleteImg" ImageUrl="~/Images/trash.png" AlternateText="Delete RSS" CssClass="trashclass" runat="server"  Width="30px" Height="30px"/>
                    </a>
             </div>
             <div class="RepeaterDivs" style="width:15%;">
                 <asp:Label ID="RptHRssTitle" runat="server" Text="Rss Title"></asp:Label>

             </div>
             <div class="RepeaterDivs" style="width:45%;">
                 <asp:Label ID="RptHRssDescription" runat="server" Text="Rss Description"></asp:Label>

             </div>
             <div class="RepeaterDivs" style="width:15%;">
                 <asp:Label ID="RptHRssUrl" runat="server" Text="Rss Url"></asp:Label>

             </div>
             <div class="RepeaterDivs" style="width:10%;">
                 <asp:Label ID="RptHRssPublicationDate" runat="server" Text="Rss Publication Date"></asp:Label>

             </div>
             <div class="RepeaterDivs" style="width:100%;">
                <hr />
            </div>
        </div>
    </HeaderTemplate>
    <ItemTemplate>
        <div   runat="server" id="rptRssContent">
            <div id="rptRssVisibleBtn" class="RepeaterDivs"  style="width:5%;">
                    <a id="RssVisibleLink" href='Default.aspx?VisibleRssId=<%#Eval("Feed_ID") %>'>
                    <asp:Image ID="RssVisibleLinkImg" runat="server" ImageUrl="~/Images/eye(3).png"  Width="30px" Height="30px"/>
                    </a>
            </div>

            <div id="rptRssEditBtn" class="RepeaterDivs" style="width:5%;">
                    <a id="EditRssLink" href='Default.aspx?EditRssId=<%#Eval("Feed_ID") %>'>
                    <asp:Image ID="EditRssImg" runat="server" ImageUrl="~/image/pencil.png"  Width="30px" Height="30px"/>
                    </a>
            </div>
            <div id="rptRssDeleteChkDiv"  class="RepeaterDivs" style="width:5%;">
                <a id="DeleteRssLink" href='Default.aspx?DelRssId=<%#Eval("Feed_ID") %>'>
                    <asp:CheckBox ID="rptRssDeleteChk" runat="server"/>
                </a>
            </div>
            <div id="rptRssTitle" class="RepeaterDivs" style="width:15%;">
              <%#Eval("FTitle")%>

            </div>
            <div id="rptRssDescription" class="RepeaterDivs" style="width:45%;">
              <%#Eval("FDescription")%>

            </div>
            <div id="rptRssUrl" class="RepeaterDivs" style="width:15%;">
                <%#Eval("FUrl") %>
            </div>
            <div id="rptRssPublicationDate" class="RepeaterDivs" style="width:10%;">
                <%#Eval("FPublicationDate") %>
            </div>
            <div class="RepeaterDivs" style="width:100%;">
                <hr />
            </div>
        </div>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
</asp:Repeater>

Note: an item is selected when check box with ID=rptRssDeleteChk is checked.
I thanks any one that guide me :)

Posted 23-Dec-14 8:54am

Bahare Aghabarari

Add a Solution

Comments

Sinisa Hajnal 24-Dec-14 4:43am

What have you tried?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sinisa Hajnal · Answer 1 · 2014-12-23T22:47:00

Solution 1

Assuming you use jQuery:

in document.ready function:
$("#rptRssDeleteChk").on("checked", function () {
$(this).closest("#rptRssContent").css("background-color", "red");
});

If this helps please take time to accept the solution.

NOTE: if you want pure javascript, you have to use getElementById and traverse parent elements until you find rptRssContent

Posted 23-Dec-14 22:47pm

Sinisa Hajnal

Comments

Bahare Aghabarari 25-Dec-14 9:08am

Thanks for answer. but when I write this code. see this error: The name 'rptRssDeleteChk' does not exist in the current context.
I thinks that because check box is in repeater don't know "rptRssDeleteChk" and
"rptRssContent" element.

Sinisa Hajnal 28-Dec-14 15:17pm

That is correct. You have to use <%=rptRssDeleteChk.ClientId %> it the control has runat="server"

Bahare Aghabarari 29-Dec-14 1:03am

I use same this syntax(<%=rptRssDeleteChk.ClientId %>) but code raise this error: rptRssDeleteChk don't exist. Whereas id of check box element is this!!! I wonder!!! Why????!!!

Bahare Aghabarari 29-Dec-14 1:11am

Of course I think this is because the check box is in repeater and in repeater this element repeat in count of data rows. and I have several check box element with id=rptRssDeleteChk in server side. and in client side I have several of these element that have different client id,Similarly.
but what is the solution?

Sinisa Hajnal 29-Dec-14 12:56pm

Use repeaters databound event and change the id of the checkbox. Alternatively, use class to select all elements of the class (for example chk-delete class)

Use improve question and post your javascript code