I have a GridView in asp.net page like below:
Checkbox Name Link
[] MainName myLink
[] -somename1 myLink1
[] -somename2 myLink2
[] --somename2.1 myLink2.1
[] MainName2 mylink3
[] -somename3 Mylink4
Note that in the naming pattern, the "Main Titles" do not include the dash character as a starting character, while the other titles have.
What I want is that, when I click the checkbox near "MainName" I need all the sub rows that belongs to the selected MainName will also be selected automatically. Assuming I click the checkbox at the first row: MainName, then it should be seen:
Checkbox Name Link
[checked] MainName myLink
[checked] -somename1 myLink1
[checked] -somename2 myLink2
[checked] --somename2.1 myLink2.1
[] MainName2 mylink3
[] -somename3 Mylink4
I am managing it by using C# like below:
protected void SelectCheckBox_OnCheckedChanged(object sender, EventArgs e)
{
System.Web.UI.WebControls.CheckBox chk = sender as System.Web.UI.WebControls.CheckBox;
GridViewRow row = (GridViewRow)chk.NamingContainer;
bool checkVal = false;
String cellText = row.Cells[2].Text;
if (cellText.IndexOf('-') < 0)
{
foreach (GridViewRow r in dgMenuItems.Rows)
{
if (row == r)
{
checkVal = true;
}
if (checkVal)
{
if (r.Cells[2].Text.IndexOf('-') < 0)
{
break;
}
else
{
var cb = (System.Web.UI.WebControls.CheckBox)r.FindControl("chbSelect");
cb.Checked = true;
}
}
}
}
}
But I want to handle it in JavaScript or JQuery, not in the server side. Any help or advice in this regard will be appreciated.
This is one way to do it.
<script>
$('.GridWithCheckBox input[type=checkbox]').change(function () {
var $cb = $(this);
//get the value of the cell to the right
var $name = $cb.parent('td').next('td').html().trim();
//check if the first value is not a '-'
if ($name.substring(0, 1) !== '-') {
//find all next rows and loop them
$cb.closest('tr').nextAll().each(function () {
//find the next cell value
var $nextName = $(this).find('td:eq(1)').html().trim();
//if it has a '-', check the checkbox
if ($nextName.substring(0, 1) === '-') {
$(this).find('input[type=checkbox]').prop('checked', $cb.prop('checked'));
} else {
//if not found stop the function
return false;
}
});
}
});
</script>
The GridView with source for demo
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="GridWithCheckBox">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<%# Eval("Name") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Link">
<ItemTemplate>
<%# Eval("Link") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And the code behind
DataTable table = new DataTable();
table.Columns.Add("ID", typeof(int));
table.Columns.Add("Name", typeof(string));
table.Columns.Add("Link", typeof(string));
table.Rows.Add(0, "MainName", "myLink");
table.Rows.Add(1, "-somename1", "myLink1");
table.Rows.Add(2, "-somename2", "myLink2");
table.Rows.Add(3, "--somename2.1", "myLink2.1");
table.Rows.Add(4, "MainName2", "mylink3");
table.Rows.Add(5, "-somename3", "Mylink4");
table.Rows.Add(6, "MainName3", "mylink5");
table.Rows.Add(7, "-somename4", "Mylink6");
GridView1.DataSource = table;
GridView1.DataBind();