Sunday, January 11, 2015

How to Get Gridview Footer Controls id in JavaScript

Introduction:

Here I will explain how to access asp.net gridview footer control ids or values in JavaScript or find controls inside gridview in JavaScript or find asp.net gridview footer controls (textbox, dropdownlist, checkbox, radio button etc..) values or ids in JavaScript.

Syntax to Get Gridview Footer Controls in JavaScript

<script type="text/javascript">
function GetGridFooterRowvalues() {
var fuid = document.getElementById('<%=((TextBox)gvUserInfo.FooterRow.FindControl("txtUserId")).ClientID %>');
if (fuid != null && funame != null && fueducation != null) {
alert('UserId:' + fuid.value)
}
}
</script>


Below code is aspx page 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>get gridview footer control id in javascript</title>
<script type="text/javascript">
function GetGridFooterRowvalues() {
var fuid = document.getElementById('<%=((TextBox)gvUserInfo.FooterRow.FindControl("txtUserId")).ClientID %>');
var funame = document.getElementById('<%=((TextBox)gvUserInfo.FooterRow.FindControl("txtUserName")).ClientID %>');
var fueducation = document.getElementById('<%=((TextBox)gvUserInfo.FooterRow.FindControl("txtEducation")).ClientID %>');
if (fuid != null && funame != null && fueducation != null) {
alert('UserId:' + fuid.value + ';UserName:' + funame.value + ';Education:' + fueducation.value)
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvUserInfo" runat="server" AutoGenerateColumns="false" ShowFooter="true">
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
<Columns>
<asp:TemplateField HeaderText="UserId">
<ItemTemplate>
<asp:Label id="lblUserid" runat="server"  Text='<%# Eval("UserId") %>' />
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtUserId" runat="server" Text="100" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UserName">
<ItemTemplate>
<asp:Label id="lblUsername" runat="server" Text='<%# Eval("UserName") %>'/>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtUserName" runat="server" Text="AsmaQ" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Education">
<ItemTemplate>
<asp:Label id="lblEducation" runat="server" Text='<%# Eval("Education") %>'/>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtEducation" runat="server" Text="BcIT" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnGet" Text="Get Footer Values" runat="server" OnClientClick="GetGridFooterRowvalues()" />
</div>
</form>
</body>
</html>

The blow code is aspx.cs code behind file.
C# Code
using System.Web.UI; 
using System.Data;
using System.Web.UI.WebControls; 
using System.Text.RegularExpressions;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        {
            BindGridview();
        }
}
protected void BindGridview()
    {
        DataTable dt = new DataTable();       

        dt.Columns.Add("UserId", typeof(Int32));
        dt.Columns.Add("UserName", typeof(string));
        dt.Columns.Add("Education", typeof(string));
        dt.Columns.Add("Location", typeof(string));
        dt.Rows.Add(1, "Muhammed Asad", "BCIT" , "Karachi");
        dt.Rows.Add(2, "Muhammed Ali", "Msc", "Karachi");
        dt.Rows.Add(3, "Madhav Sai", "MS", "Karachi");
        dt.Rows.Add(4, "Asma", "MBA", "Karachi");
        dt.Rows.Add(6, "Faheem Shah", "MBBS", "Karachi");
        dt.Rows.Add(7, "Asif Raza", "B.Tech", "Karachi");
        dt.Rows.Add(8, "Daniel", "CA", "Karachi");
        gvDetails.DataSource = dt;
        gvDetails.DataBind();       
    }

No comments:

Post a Comment