Ajax ConfirmButtonExtender With ModalPopUp In GridView Asp.Net

This example implements Ajax ConfirmButtonExtender With ModalPopUp Extender In Asp.Net GridView to show Delete Confirmation before deleting records.

Populate GridView using SqlDataSource and add one LinkButton inside TemplateField in Columns.

   1:  <asp:TemplateField HeaderText="Delete">

   2:  <ItemTemplate>

   3:  <asp:LinkButton ID="lnkDel" runat="server" 

   4:                  CommandName="Delete" Text="Delete"/>

Place ToolkitScriptManager and UpdatePanel on the page and add ConfirmButton, ModalPopUpExtender and Panel to pop inside Template field we added earlier.

HTML SOURCE

---

<div>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:GridView ID="GridView1" runat="server" 

              AutoGenerateColumns="False" 

              DataKeyNames="ProductID" 

              DataSourceID="SqlDataSource1"

              onrowdeleted="GridView1_RowDeleted">

<Columns>

<asp:TemplateField HeaderText="Delete">

<ItemTemplate>

<asp:LinkButton ID="lnkDel" runat="server" 

                CommandName="Delete" Text="Delete"/>

<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" 

                           runat="server" 

                           TargetControlID="lnkDel"

                           DisplayModalPopupID="ModalPopupExtender1"/>

<asp:ModalPopupExtender ID="ModalPopupExtender1" 

                        runat="server"

                        TargetControlID="lnkDel"

                        PopupControlID="pnlModal"

                        BackgroundCssClass="Background"

                        OkControlID="btnYes"

                        CancelControlID="btnNo"

                        X="80"

                        Y="80"/>

<asp:Panel runat="Server" ID="pnlModal" CssClass="Pnl">

<br />         

Do you want to delete this record

<br /><br />

<asp:Button ID="btnYes" runat="server" Text="Yes"/>

<asp:Button ID="btnNo" runat="server" Text="No"/>

</asp:Panel>

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="ProductID" HeaderText="ProductID"/>

<asp:BoundField DataField="ProductName" HeaderText="ProductName"/> 

<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"/> 

<asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock"/> 

</Columns>

</asp:GridView>

<asp:Label ID="lblMessage" runat="server" Text=""/>

</ContentTemplate>

</asp:UpdatePanel>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 

ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 

DeleteCommand="DELETE FROM [Products] 

               WHERE [ProductID] = @ProductID" 

SelectCommand="SELECT [ProductID], [ProductName], 

              [UnitPrice], [UnitsInStock] FROM [Products]" 

<DeleteParameters>

<asp:Parameter Name="ProductID" Type="Int32" />

</DeleteParameters>

</asp:SqlDataSource>

</div>

Add following CSS style in Head section of the page.

Build and run the code

Download Sample Code

Read more >>

Auto Refresh Update GridView In Asp.Net Ajax With Timer

This Example describes How To Auto Refresh Or Update GridView Automatically At Regular Interval In Asp.Net Using Ajax And Timer.

Add GridView And Timer control inside UpdatePanel on the page and set Interval property to desired value in miliseconds. I have set it to 5000 (5 Seconds).

HTML SOURCE

---

   1:  <asp:ScriptManager ID="ScriptManager1" runat="server"/>

   2:  <asp:UpdatePanel ID="UpdatePanel1" runat="server">

   3:  <ContentTemplate>

   4:   

   5:  <asp:Timer ID="AutoRefreshTimer" runat="server" 

   6:             Interval="5000" 

   7:             ontick="AutoRefreshTimer_Tick"/>

   8:                              

   9:  <asp:GridView ID="GridView1" runat="server" 

  10:                AutoGenerateColumns="False" 

  11:                DataSourceID="SqlDataSource1">

  12:  <Columns>

  13:  <asp:BoundField DataField="FirstName" HeaderText="FirstName"/>

  14:  <asp:BoundField DataField="LastName" HeaderText="LastName"/>

  15:  <asp:BoundField DataField="Location" HeaderText="Location"/>

  16:  </Columns>

  17:  </asp:GridView>

  18:   

  19:  <asp:SqlDataSource ID="SqlDataSource1" runat="server" 

  20:  ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

  21:  SelectCommand="SELECT [FirstName], [LastName], [Location] 

  22:                 FROM [Details]">

  23:  </asp:SqlDataSource>

  24:   

  25:  <asp:Label ID="lblMsg" runat="server"/>

  26:  </ContentTemplate>

  27:  </asp:UpdatePanel>

Rebind GridView In Tick Event of Timer to refresh.

C#

---

protected void AutoRefreshTimer_Tick(object sender, EventArgs e)
    {
        GridView1.DataBind();
        lblMsg.Text = "Last Updated at " + DateTime.Now;
    }

Image below shows the implementation.

Hope this helps.

Read more >>

Select GridView Row Without Postback OnClick Of Cell JavaScript

This Example explains how to Select GridView Row On Click Of Cell Programmatically Without Postback Using JavaScript In Asp.Net.

We can make cells clickable by adding OnClick attribute in ClientScript.

Place ScriptManager And UpdatePanel on the page and add Gridview inside ContentTemaplate for partial postbacks, Populate it using SqlDataSource.


HTML SOURCE OF GRIDVIEW

---

   1:  <asp:ScriptManager ID="ScriptManager1" runat="server"/>

   2:  <asp:UpdatePanel ID="UpdatePanel1" runat="server">

   3:  <ContentTemplate>

   4:   

   5:  <asp:GridView ID="GridView1" runat="server" 

   6:                AutoGenerateColumns="False" 

   7:                DataKeyNames="EmployeeID" 

   8:                DataSourceID="SqlDataSource1" 

   9:                onrowdatabound="GridView1_RowDataBound" 

  10:                AllowPaging="True"    

  11:                onpageindexchanging="GridView1_PageIndexChanging">

  12:  <Columns>

  13:  <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"/>

  14:  <asp:BoundField DataField="FirstName" HeaderText="FirstName"/>

  15:  <asp:BoundField DataField="City" HeaderText="City"/>

  16:  <asp:BoundField DataField="Country" HeaderText="Country"/>

  17:  </Columns>

  18:  </asp:GridView>

  19:   

  20:  <asp:SqlDataSource ID="SqlDataSource1" runat="server" 

  21:  ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

  22:  SelectCommand="SELECT [EmployeeID], [FirstName], [City], 

  23:                [Country] FROM [Employees]">

  24:  </asp:SqlDataSource>

  25:  </ContentTemplate>

  26:  </asp:UpdatePanel>

Write code mentioned below in RowDataBound Event.

C#

---

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';";
            e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";

            e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.GridView1, "Select$" + e.Row.RowIndex);
        }
    }

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.SelectedIndex = -1;
    }

VB.NET

---

Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs)
 If e.Row.RowType = DataControlRowType.DataRow Then
  e.Row.Attributes("onmouseover") = "this.style.cursor='hand';"
  e.Row.Attributes("onmouseout") = "this.style.textDecoration='none';"

  e.Row.Attributes("onclick") = ClientScript.GetPostBackClientHyperlink(Me.GridView1, "Select$" & Convert.ToString(e.Row.RowIndex))
 End If
End Sub

Protected Sub GridView1_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
 GridView1.SelectedIndex = -1
End Sub

While running this code we get EventValidation error.

Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

We can fix this by setting EnableEventValidation="false" in page directive but it will be a security risk, so there are other ways to handle this.

Method 1.

---

Add this style in head section of page

   1:  <style>

   2:  .visibility {Display : none}

   3:  </style>

Now add ShowSelectButton Commandfield column in gridview source and set it's css property to style we added in head. this will hide the select button.

   1:  <asp:CommandField ShowSelectButton="True" 

   2:                    ItemStyle-CssClass="visibility"/>

Method 2.

---

Remove the code from RowDataBound Event of GridView and OverRide Render event of page, set the last parameter (bool registerForEventValidation) of ClientScript to true.

C#

---

protected override void Render(System.Web.UI.HtmlTextWriter textWriter)
    {
        foreach (GridViewRow gvRow in GridView1.Rows)
        {
            if (gvRow.RowType == DataControlRowType.DataRow)
            {
                gvRow.Attributes["onmouseover"] =
                   "this.style.cursor='hand';";
                gvRow.Attributes["onmouseout"] =
                   "this.style.textDecoration='none';";
                gvRow.Attributes["onclick"] =
                 ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + gvRow.RowIndex, true);
            }
        }
        base.Render(textWriter);
    }

VB

---

Protected Overrides Sub Render(textWriter As System.Web.UI.HtmlTextWriter)
 For Each gvRow As GridViewRow In GridView1.Rows
  If gvRow.RowType = DataControlRowType.DataRow Then
   gvRow.Attributes("onmouseover") = "this.style.cursor='hand';"
   gvRow.Attributes("onmouseout") = "this.style.textDecoration='none';"
   gvRow.Attributes("onclick") = ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + gvRow.RowIndex, True)
  End If
 Next
 MyBase.Render(textWriter)
End Sub

Hope this helps.

Read more >>

GridView Articles In Asp.Net 2.0 3.5 4.0

Below is the list of some GridView Articles In Asp.Net 2.0 3.5 and 4.0, Which i have complied from some of the earlier posts related to GridView at one place.

1. Insert Update Edit Delete Rows Record In GridView

---

How To Insert Update Edit Delete Records With SqlDataSource Using C# VB.NET Asp.Net.

2.Drag Drop GridView Rows With JQuery

---

How To Implement Drag And Drop Functionality Using JQuery JavaScript To Rearrange Rows On Client Side.

3. Display Files In GridView From Server Directory

---

This Example Show How To Display Files Directory Sub Directories In From Server.

4. Nested GridView With Expand Collapse

---

Create Nested GridView With Expand Collapse Functionality.

5. Sort GridView By Columns Header In Ascending Descending

---

Enable Sorting In GridView By Clicking on Columns Or Headers In Ascending Or Descending Direction.

6. Hide Disable CommandField ButtonField

---

How to Conditionally Hide Or Disable CommandField Or ButtonField Programmatically.

7. Running Total In Gridview Footer

---

Display Running Total In Footer Row In ASP.NET using C# and VB.NET.

8. Freeze Headers With Scrollable GridView

---

Freeze Headers With Scrollable GridView Using CSS.

9. Images In Gridview DataList Using ObjectDataSource

---

Add or Show Images Using ObjectDataSource.

10. GridView With ObjectDataSource To Insert Edit Update

---

Insert Edit Update GridView With ObjectDataSource In Asp.Net 2.0,3.5,4.0.

11. AutoNumber Column In GridView DataList ASP.NET

---

How to Add AutoNumber Column In GridView Or DataList.

12. Search Records And Highlight Results Using Ajax

---

Search Records In GridView Footer and highlight results using ajax.

13. Edit Update GridView With Ajax ModalPopUpExtender

---

How To Edit Update GridView Rows Records With Ajax ModalPopUpExtender

14. Print GridView Data JavaScript

---

How To Print GridView Data In Asp.Net

15. Ajax Cascading DropDownList With Database In GridView

---

This example implements Ajax Cascading DropDownList In GridView Using Asp.Net 2.0,3.5,4.0

Read more >>

Drag Drop GridView Rows With JQuery Asp.Net

This Example explains How To Implement Drag And Drop GridView Rows Functionality Using JQuery JavaScript In Asp.Net 2.0 3.5 4.0 To Rearrange Row On Client Side.

You need to download and add JQuery and TableDnD plugin in your application.

GridView is populated with Northwind database using SqlDataSource.

Add Script references and css style in head section of page.

   1:  <style type="text/css">

   2:     .highlight

   3:      {

   4:          color : White !important;

   5:          background-color : Teal !important;

   6:      }

   7:  </style>

   8:  <script src="jquery-1.7.1.js" type="text/javascript"/>

   9:  <script src="jquery.tablednd.0.7.min.js" type="text/javascript"/>

Call tableDnD function of drag and drop plugin by passing Gridview Id.

   1:  <script type="text/javascript" language="javascript">

   2:  $(document).ready(function() 

   3:  {

   4:  $("#<%=GridView1.ClientID%>").tableDnD(

   5:              {

   6:                  onDragClass: "highlight"

   7:              });

   8:  });

   9:  </script>

  10:  </head>

   1:  <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 

   2:                AutoGenerateColumns="False" DataKeyNames="OrderID" 

   3:                DataSourceID="SqlDataSource1">

   4:  <Columns>

   5:  <asp:BoundField DataField="OrderID" HeaderText="OrderID"/>

   6:  <asp:BoundField DataField="Freight" HeaderText="Freight"/>

   7:  <asp:BoundField DataField="ShipName" HeaderText="ShipName"/>

   8:  <asp:BoundField DataField="ShipCity" HeaderText="ShipCity"/>

   9:  <asp:BoundField DataField="ShipCountry" HeaderText="ShipCountry"/>

  10:  </Columns>

  11:  </asp:GridView>

Build and run the code.

Read more >>