Archive for September, 2014

Merge Cells in ASP.Net Gridview Footer

September 24, 2014 Leave a comment

Hi all,

try this example to Merge Cells in ASP.Net Gridview Footer and display message

1- We need to Set Property ShowFooter=”true”

2- In RowDataBound Event of Gridview Add the following Code

protected void gvResult_RowDataBound(object sender, GridViewRowEventArgs e)
if (e.Row.RowType == DataControlRowType.Footer)
//remove all cells but one
for (int i = 0; i < gvResult.Columns.Count - 1; i++)
e.Row.Cells[0].ColumnSpan = gvResult.Columns.Count;
e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Center;
e.Row.Cells[0].Text = "Page " + (gvResult.PageIndex + 1) + " of " + gvResult.PageCount;

Hope this helps

Good Luck.

Categories: ASP.Net

Validate CheckBox in GridView (at least one checked) using JavaScript in ASP.Net

September 17, 2014 Leave a comment

Hi all,

try this example to Validate CheckBox in GridView (at least one checked) using JavaScript in ASP.Net

– HTML Markup :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<asp:CheckBox ID="CheckBox1" runat="server" Text='<%# Eval("Id") %>' />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Country" HeaderText="Country" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please select at least one record."
ClientValidationFunction="Validate" ForeColor="Red"></asp:CustomValidator>

<asp:Button ID="Button1" runat="server" Text="Submit" />

– Binding the GridView control in Code behind :

protected void Page_Load(object sender, EventArgs e)
if (!this.IsPostBack)
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "Mark John", "United States");
dt.Rows.Add(2, "Yasser Zaid", "Egypt");
dt.Rows.Add(3, "Ahmed Ali", "Saudi Arabia");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;

– CustomValidator JavaScript Validation function :

<script type="text/javascript">
function Validate(sender, args) {
var gridView = document.getElementById("<%=GridView1.ClientID %>");
var checkBoxes = gridView.getElementsByTagName("input");
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].type == "checkbox" && checkBoxes[i].checked) {
args.IsValid = true;
args.IsValid = false;

Hope this helps

Good Luck.

Categories: ASP.Net, Javascript

ASP.Net GridView Row Custom Tooltip Using JQuery

September 4, 2014 Leave a comment

Hi all,

try this example to Create Row Custom Tooltip Using JQuery With ASP.Net GridView

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
    <style type="text/css">
            display: none;
            border: solid 1px #708069;
            background-color: #289642;
            color: #fff;
            line-height: 25px;
            border-radius: 5px;
            padding: 5px 10px;
            position: absolute;
    <script src="" type="text/javascript"></script>
    <script language="javascript">
        $(document).ready(function () {
            $(".tooltip").closest("tr").mousemove(function (event) {
                    "left": event.pageX + 1,
                    "top": event.pageY + 1
            }).mouseout(function () { $(this).find(".tooltip").hide(); }); ;
    <form id="form1" runat="server">
    <asp:GridView ID="gv" runat="server" CellPadding="4" ForeColor="#333333"
            AutoGenerateColumns="False" DataKeyNames="EmployeeID" 
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <asp:BoundField HeaderText="EmployeeID" DataField="EmployeeID" 
                    InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" />
                <asp:BoundField HeaderText="FirstName" DataField="FirstName" 
                    SortExpression="FirstName" />
                <asp:BoundField HeaderText="LastName" DataField="LastName" 
                    SortExpression="LastName" />
                        <div class="tooltip">
                            Full Name :
                            <%#Eval("FirstName")%> &nbsp; <%#Eval("LastName")%>

                            Title :

                            Address :

                            City :

                            Postal Code :

                            Region :

        <asp:SqlDataSource ID="sds_Employee" runat="server" 
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
            SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City], [Region], [PostalCode] FROM [Employees]">

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery