grid view problem

hi,

i have a first image on grid view when i click on image the second image show and first image go hide.

i want it to do on j-query.

please help me out.

thanks for the help.

Hi

Can you post the grid view mark-up (i.e. HTML) here.

<asp:GridView ID="gvBasket" runat="server" AutoGenerateColumns="False" CssClass="gvtable_normal"
                                    BorderStyle="None" CellPadding="4" ForeColor="#333333" GridLines="None">
                                    <AlternatingRowStyle BackColor="#eeeded" />
                                    <Columns>
                                        <asp:TemplateField>
                                            <ItemTemplate>
                                                <asp:ImageButton ID="imgGreenTick" CommandName="imgGreen" class="txtboxclass" ImageUrl="../images/Basket_Orbizz/tik-box.png"
                                                    runat="server" Visible="false" />
                                                <asp:ImageButton ID="imgWhiteTick" CommandName="imgWhite" ImageUrl="../images/Basket_Orbizz/nontik-box.png"
                                                    class="txtboxclass" runat="server" />
                                            </ItemTemplate>
                                            <ItemStyle CssClass="gvColumnMargin" Height="45px" />
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Credit amount">
                                            <ItemTemplate>
                                                <asp:Label runat="server" Style="font-family: Arial; font-size: 14px; font-weight: bold;
                                                    color: #707070; margin-left: 10px;" ID="lblProductName" Text='<%#Eval("Name")%>'></asp:Label>
                                                <asp:Label runat="server" Style="font-family: Arial; font-size: 14px; font-weight: bold;
                                                    color: #707070; margin-left: 25px; display: none" ID="lblProductid" Text='<%#Eval("ProductId")%>'></asp:Label>
                                            </ItemTemplate>
                                            <HeaderStyle Width="160px" CssClass="ColorVersionName" HorizontalAlign="Left"></HeaderStyle>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Quantity">
                                            <ItemTemplate>
                                                <asp:TextBox ID="tbQty" Text="0" Style="font-family: Arial; font-size: 14px; font-weight: bold;
                                                    color: #707070; text-align: center; height: 10px; background-color: #fff" CssClass="buytextbox"
                                                    Columns="1" runat="server" Enabled="false" onkeypress="javascript:return onlyNumbers(this);"
                                                    onfocusout="javascript:return FetchTextbox(this);" onblur="javascript:txtQty_LostFocus(this); return FetchLabel(this);"></asp:TextBox>
                                            </ItemTemplate>
                                            <HeaderStyle CssClass="ColorVersion" Width="110px" HorizontalAlign="Left"></HeaderStyle>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Price">
                                            <ItemTemplate>
                                                <span style="font-family: arial; font-size: 14px; font-weight: bold; color: #3babfd;">
                                                    <%=Session("CSymbol")%><asp:Label Style="font-family: arial; font-size: 14px; font-weight: bold;
                                                        color: #3babfd;" ID="RetailPrice" runat="server" Text='<%#Eval("Price","{0:F2}") %>'></asp:Label></span>
                                                <asp:HiddenField ID="hdnPrice" Value='<%#Eval("Price") %>' runat="server" />
                                            </ItemTemplate>
                                            <HeaderStyle CssClass="ColorVersion" Width="110px" HorizontalAlign="Left"></HeaderStyle>
                                        </asp:TemplateField>
                                        <asp:TemplateField ItemStyle-BackColor="#ffffff">
                                            <ItemTemplate>
                                                <asp:Label ID="TotalPRice" runat="server"></asp:Label>
                                            </ItemTemplate>
                                            <HeaderStyle HorizontalAlign="Left" CssClass="ColorVersion"></HeaderStyle>
                                        </asp:TemplateField>
                                        <asp:TemplateField ItemStyle-BackColor="#ffffff">
                                            <ItemTemplate>
                                                <asp:Image ID="Image1" Style="margin-bottom: -11px;" ImageUrl="../images/DataUSBDongle/Scroll-Save10.png"
                                                    runat="server" Visible="false" />
                                                <asp:Image ID="Image2" ImageUrl="../images/DataUSBDongle/Scroll-Save20.png" runat="server"
                                                    Style="margin-bottom: -11px;" Visible="false" />
                                                <asp:Image ID="DSave15" runat="server" src="../images/BasketSIMCard/Scroll-$-Save15.png"
                                                    Visible="false" Style="margin-bottom: -11px;" />
                                                <asp:Image ID="DSave30" runat="server" src="../images/BasketSIMCard/Scroll-$-Save30.png"
                                                    Visible="false" Style="margin-bottom: -11px;" />
                                            </ItemTemplate>
                                            <HeaderStyle HorizontalAlign="Left" CssClass="ColorVersion"></HeaderStyle>
                                        </asp:TemplateField>
                                    </Columns>
                                    <EditRowStyle BackColor="#999999" />
                                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                    <HeaderStyle ForeColor="Gray" />
                                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Left" />
                                    <RowStyle ForeColor="#333333" Font-Size="small" />
                                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                                    <SortedAscendingCellStyle BackColor="#E9E7E2" />
                                    <SortedAscendingHeaderStyle BackColor="#506C8C" />
                                    <SortedDescendingCellStyle BackColor="#FFFDF8" />
                                    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                                </asp:GridView>

Hi

From your mark-up Ii see there are more images controls, for which images you wanted to have the jquery show/hide functionality. If you hide the first image and show the second image, how do you undo that(i.e. showing the first image again and hide the second
image).

and you are hiding the image controls using (Visible=false) with setting this property to
false server will not render the controls and java script/jquery will not get those controls which are not there in the mark-up.

Try set the style=’display:none’

Hope you understand. 

Hi immad,

For there are many images controls, I am not quite sure which you wanted to have show/hide functionality.

Please explain more exactly about which image control you want to click and hide.

Best Regards,

Kevin Shen.

Leave a Reply