HTML and CSS Reference
In-Depth Information
Listing 2-10.
Change
Event Handler of the Check Boxes
$("#GridView1 :checkbox[id$='chkHeader']").change(function () {
if ($("#GridView1 :checked[id $='chkHeader']").is(":checked")) {
$("#GridView1 :checkbox[id *='chkItem']").attr("checked", "checked");
}
else {
$("#GridView1 :checkbox[id *='chkItem']").removeAttr("checked");
}
})
The code shown in Listing 2-10 wires the
change
event handler for the check box in the header row. It
does so using the
ends with
attribute selector because at runtime, the
GridView
generates unique IDs for
the check boxes. While generating these unique IDs, the design-time ID set by the developer is appended
at the end of a unique string value. For example, the header check box has its ID property set to
chkHeader
,
and at runtime its client-side ID becomes
GridView1$ctl01$chkHeader
. The
change
event handler of the
header check box selects all the check boxes from the
GridView
rows and toggles their state depending on
the header check box state. The check box state is toggled by adding or removing the
checked
attribute
using the jQuery
attr()
method.
The
change
event handler of all the radio buttons is wired as shown in Listing 2-11.
Listing 2-11.
Change
Event Handler of the Radio Buttons
$("#GridView1 :radio[id *='radItem']").change(function () {
var newId = this.id;
$("#GridView1 :radio[id *='radItem']").each(function (index) {
if (this.id != newId) {
$(this).removeAttr("checked");
}
})
})
By default, radio buttons placed in a
GridView
aren't mutually exclusive, and you can select more than
one radio button. This happens because the
GridView
generates a different name for each of the radio
button rather than treating them as a group. To tackle this problem, the
change
event handler of the radio
buttons iterates through the radio buttons and unchecks all of them other than the one being selected. To
iterate through the radio buttons, the code uses the jQuery
each()
method. The
each()
method takes a
function that is executed on each element from the matched set. The callback function receives a zero-
based index of the current element from the matched set. To uncheck a radio button, its
checked
attribute
is removed using the
removeAttr()
method.
The
change
event handler of the list box displaying the cities is shown in Listing 2-12.
Listing 2-12.
Change
Event Handler of the List Box
$("#ListBox1").change(function () {
$("#GridView1 :input").attr("disabled", "disabled");
$("#ListBox1 option:selected").each(function () {
$("#GridView1 tr:contains('" + this.value + "')").each(function () {
$(":input", this).removeAttr("disabled");
})
})
})
