i have gridview in which i have a Image button with id ImageButton3 on click of which i want to hide that corresponding row by first highlighting it by followed fadeIn effect here is code of gridview ltaspGridView ID34grid34 runat34server34 AutoGenerateColumns34False34 CssClass34mGrid34 ShowFooter34true34 AlternatingRowStyleCssClass34altrow34 DataKeyNames34productid34 Width3410034 BorderWidth340px34 AllowPag

Refer the following samplelthtml xmlns34httpwwww3org1999xhtml34gtlthead id34Head134 runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery1jqueryminjs34gtltscriptgt ltscript type 34textjavascript34gt 34idImageButton134live34click34 function var row thisclosest34tr34 34td34 rowcss34backgroundColor34 34ffff9034 34td34 rowfadeOut1000 function rowhide return false ltscriptgtltheadgtltbodygt ltform id34form134 runat34server34gt ltaspGridView ID34GridView134 runat34server34 AutoGenerateColumns34false34gt ltColumnsgt ltaspBoundField DataField34Id34 HeaderText

Change BackGroundColor and thenFadeOut ASP.Net GridViewRow on Button click with jQuery

puneet20...

SOLVED CLOSED ACTIVE ANSWERED
User: puneet2012
Posted: on Aug 03, 2012 03:27 AM
Forum: ASP.Net Web Forms
Answer: 1
Views: 3978

i have gridview in which i have a Image button with id (' ImageButton3 ') on click of which i want to hide that corresponding row , by first highlighting it by followed fadeIn effect ....

here is code of gridview:

<asp:GridView ID="grid" runat="server"  AutoGenerateColumns="False"  CssClass="mGrid" ShowFooter="true"
 AlternatingRowStyle-CssClass="altrow" DataKeyNames="productid" Width="100%" BorderWidth="0px"
   AllowPaging="True" PagerStyle-HorizontalAlign="Center" PagerStyle-VerticalAlign="Middle">
    <RowStyle Height="50px" />
    <Columns >
       <asp:TemplateField HeaderText="Image" ItemStyle-HorizontalAlign="center" ItemStyle-Width="100px">
        <ItemTemplate>
            <asp:HiddenField ID="HiddenField1"  Value='<%#Eval("productid")%>' runat="server" />
        </ItemTemplate>
      </asp:TemplateField>
     
      <asp:BoundField DataField="prodname" HeaderText="Product Name"
       ReadOnly="True" SortExpression="Name" ItemStyle-HorizontalAlign="center" ItemStyle-Width="250px">
      
      </asp:BoundField>
      <asp:BoundField DataField="prodprice" DataFormatString="Rs. {0}" HeaderText="Price" ReadOnly="True"
        SortExpression="Price" ItemStyle-Width="100px"  ItemStyle-HorizontalAlign="Center" />
        
      <asp:TemplateField HeaderText=" " ItemStyle-HorizontalAlign="center" ItemStyle-Width="50px">
        <ItemTemplate>
            <asp:ImageButton ID="ImageButton3" ImageUrl="images/delete.jpg" 
             runat="server" />
        </ItemTemplate>
      </asp:TemplateField>
     
    </Columns>
    
    
  </asp:GridView>

this is code for javascript:

<script type="text/javascript">
    $(document).ready(function() {
        $("[id*=ImageButton3]").live("click", function() {

            $(this).closest("tr").hide();


            return false;


        });

    });
     </script>

but the code i am using only hide the row , i am not able to get the effects of fadeIn and highlighting ..

Also i want i know that am i using right code to hide gridview row ?

Mudassar

0 1

Reply
ANSWER
User: Mudassar
Replied: on Aug 03, 2012 03:40 AM
Report

Refer the following sample

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type = "text/javascript">
        $("[id*=ImageButton1]").live("click", function () {
            var row = $(this).closest("tr");
            $("td", row).css("backgroundColor", "#ffff90");
            $("td", row).fadeOut(1000, function () {
                row.hide();
            });
            return false
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Id"  HeaderText="Id" />
            <asp:BoundField DataField="Name" HeaderText="Name" />
              <asp:TemplateField>
                <ItemTemplate>
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl = "~/images/desc.gif" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Name"), new DataColumn("Id") });
        dt.Rows.Add("John", "1");
        dt.Rows.Add("Sam", "2");
        dt.Rows.Add("Mike", "3");
        dt.Rows.Add("Jerry", "4");
        dt.Rows.Add("Thomas", "5");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }

Change BackGroundColor and thenFadeOut ASP.Net GridViewRow on Button click with jQuery

Company

Explore

Follow us

Contact Us