How to select the sub-items of a row item selected in GridView by using JavaScript or Jquery?

Question

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.

Answer 1

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();