This
article will show you how you can enable or disable gridview button by row
checkbox using javascript/jquery in asp.net. In this I have shown for making
button of row by row checkbox.
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 we will create a new asp.net application and add the below code.
<form id="form1" runat="server">
CheckBox
Id<div id="msgData"></div>
<div>
<asp:GridView ID="GridView1"
runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1"
runat="server" onclick="javascript:ManageButtonControl(this);" />
</ItemTemplate>
</asp:TemplateField>
<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>
|
Now here is
the code to bind the grid view.
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;
}
}
}
|
After
binding the gridview we will write our jQuery code. But before that we will
check our page view source. Please check the bellow code of page source. This
is the most important part of this article. Without understanding this we will
not be able to understand the other articles.
<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse: collapse;">
<tr>
<th scope="col"> </th>
<th scope="col">Country
Name</th>
<th scope="col">Population</th>
<th scope="col">Code</th>
<th scope="col"> </th>
</tr>
<tr>
<td>
<input id="GridView1_CheckBox1_0" type="checkbox" name="GridView1$ctl02$CheckBox1" onclick="javascript:
ManageButtonControl(this);" />
</td>
<td>India</td>
<td>125 Cr</td>
<td>IN</td>
<td>
<input type="submit" name="GridView1$ctl02$Button1" value="Click
Me" id="GridView1_Button1_0" />
</td>
</tr>
<tr>
<td>
<input id="GridView1_CheckBox1_1" type="checkbox" name="GridView1$ctl03$CheckBox1" onclick="javascript:
ManageButtonControl(this);" />
</td>
<td>Pakistan</td>
<td>50 Cr</td>
<td>PK</td>
<td>
<input type="submit" name="GridView1$ctl03$Button1" value="Click
Me" id="GridView1_Button1_1" />
</td>
</tr>
</table>
|
Note: Here I
am showing html code of only two record of gridview.
Now check
the highlighted part of the code. In this check the Id. In this you will find a
pattern repetition of the Id of the checkbox and button control. Now we will
apply a trick for this Id to get the row control button control.
Now check the jQuery code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
function
ManageButtonControl(val) {
//Get the checkbox Id
var checkboxId = val.id;
//Checkbox id will be as shown
format"GridView1_CheckBox1_1" This may change. For your page
var splitCheckboxId =
checkboxId.split('_');
//Get the button control id from view source of the
page.
var buttonControlId = "GridView1_Button1_" + splitCheckboxId[2];
var status = $("#" +
checkboxId).prop("checked");
if (status == true) {
//Disable
$("#" +
buttonControlId).prop('disabled', true);
} else {
//Enable
$("#" +
buttonControlId).prop('disabled', false);
}
}
</script>
|
In above
code first I have identified the checkbox id and after finding the id of
checkbox i have split the id with “_”, and taken the last index. This may be
different in your case. After that I have prepared the id for the gridview button
control. Make sure that you are preparing your button id as per the pattern
visible in your page view source.
After
preparing the id’s get the current checkbox status and as per the row no enable
disable the button control inside the gridview.
Now we have
done run the application to check the output.
About the Author
0 comments:
Please let me know your view