This
article will show you how you can enable or disable all gridview button on
check of checkbox using jQuery. In this I have shown how you can enable disable
all the buttons of gridview on click of checkbox present outside the gridview
using jQuery.
Some of my
previous articles are as follows: Browse, Read and Populate or Show or Bind CSV File Data In GridView Using
C#.Net in Asp.net, Bind Class Property to GeidView Using C#.net In Asp.net, Gridview Auto Generate Row Number In Asp.Net Using C#.Net, Bind TextBox Control Inside TemplateField Of GridView Using C#.Net In
Asp.Net, Short GridView Data From Header Using C#.Net In Asp.Net, Export GridView Or Table Data Into PDF By C#.Net In Asp.Net Using jQuery, Reading XML Document in C# Using Linq and Bind To GridView In Asp.Net, Nested GridView Using c#.Net In Asp.Net, Read XML File in Dataset And Bind To GridView In Asp.Net Using C#.Net.
So for this
article first create an asp.net application and add the below code into your
.aspx page.
<form id="form1" runat="server">
<div>
Enable
Or Disable:
<asp:CheckBox ID="CheckBox1"
runat="server" />
</div>
<div>
<asp:GridView ID="GridView1"
runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="CountryName"
HeaderText="Country Name"
/>
<asp:BoundField DataField="Population"
HeaderText="Population"
/>
<asp:BoundField DataField="Code" HeaderText="Code" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="Button1" runat="server" Text="Click Me"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
|
After adding the above code now we will prepare the jQuery code to perform the operation. In above code I have taken a checkbox and a gridview control. In which a button control is present.
Here is the
code to bind the GridView:
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
namespace WebApplication7
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt =
GetCountryData();
GridView1.DataSource = dt;
GridView1.DataBind();
}
private DataTable GetCountryData()
{
DataTable dt = new DataTable();
dt.Clear();
dt.Columns.Add("CountryName");
dt.Columns.Add("Population");
dt.Columns.Add("Code");
DataRow dataRow1 =
dt.NewRow();
dataRow1["CountryName"] = "India";
dataRow1["Population"] = "125
Cr";
dataRow1["Code"] = "IN";
dt.Rows.Add(dataRow1);
DataRow dataRow2 =
dt.NewRow();
dataRow2["CountryName"] = "Pakistan";
dataRow2["Population"]
= "50 Cr";
dataRow2["Code"] = "PK";
dt.Rows.Add(dataRow2);
DataRow dataRow3 =
dt.NewRow();
dataRow3["CountryName"] = "United
States";
dataRow3["Population"] = "25
Cr";
dataRow3["Code"] = "US";
dt.Rows.Add(dataRow3);
return dt;
}
}
}
|
Now here is the jQuery code to enable disable the button of gridview.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("#<%=CheckBox1.ClientID %>").click(function () {
var status = $("#<%=CheckBox1.ClientID %>").prop("checked");
if(status==true)
{
$('input[type="submit"]').prop('disabled', true);
} else {
$('input[type="submit"]').prop('disabled', false);
}
});
});
</script>
|
In above code I have assign the click event to checkbox and after that I validated weather it is checked or not if it is checked on that case enable disable take place. Here if checkbox is checked all buttons will be in disable mode and on other case it will be in enable. Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view