Archive

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.RemoveAt(0);
}
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.

Advertisements
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">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Text='<%# Eval("Id") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Country" HeaderText="Country" />
</Columns>
</asp:GridView>
<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;
GridView1.DataBind();
}
}

– 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;
return;
}
}
args.IsValid = false;
}
</script>

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .tooltip
        {
            display: none;
            border: solid 1px #708069;
            background-color: #289642;
            color: #fff;
            line-height: 25px;
            border-radius: 5px;
            padding: 5px 10px;
            position: absolute;
            z-index:1001;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script language="javascript">
        $(document).ready(function () {
            $(".tooltip").closest("tr").mousemove(function (event) {
                $(this).find(".tooltip").css({
                    "left": event.pageX + 1,
                    "top": event.pageY + 1
                }).show();
            }).mouseout(function () { $(this).find(".tooltip").hide(); }); ;
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="gv" runat="server" CellPadding="4" ForeColor="#333333"
            AutoGenerateColumns="False" DataKeyNames="EmployeeID" 
            DataSourceID="sds_Employee">
            <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" />
            <Columns>
                <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" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <div class="tooltip">
                            Full Name :
                            <%#Eval("FirstName")%> &nbsp; <%#Eval("LastName")%>

                            Title :
                            <%#Eval("Title")%>

                            Address :
                            <%#Eval("Address")%>

                            City :
                            <%#Eval("City")%>
                            

                            Postal Code :
                            <%#Eval("PostalCode")%>

                            Region :
                            <%#Eval("Region")%>

                        </div>
                    </ItemTemplate>
                </asp:TemplateField>    
            </Columns>
        </asp:GridView>
        <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]">
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery