When clicking on the select all header checkbox, only the checkboxes in that specific column should be selected. The same rule should apply for both columns.
Currently, the code is selecting and unselecting both columns at once when any checkbox is clicked. However, I want them to function independently from each other. This means that when the header checkbox is selected, only the checkboxes in that particular column should be affected, and vice versa for the other column.
<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
<HeaderStyle Width="50px" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Left" />
<ItemTemplate>
<asp:CheckBox ID="chkStatus" runat="server" Width="15px" Checked='<%# Convert.ToBoolean(Eval("isAssignJD")) %>' />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="headerChkbox" runat="server" onclick="javascript:SelectAllCheckboxesSpecific(this);" />
</HeaderTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="CheckBoxTemplate">
<HeaderStyle Width="50px" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Left" />
<ItemTemplate>
<asp:CheckBox ID="chkUpdate" runat="server" Width="15px" Checked="false" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="headerUpdate" runat="server" onclick="javascript:SelectAllCheckboxesSpecific(this);" />
</HeaderTemplate>
</telerik:GridTemplateColumn>
Below is the function:
function SelectAllCheckboxesSpecific(spanChk) {
// Select checkboxes within the grid
var IsChecked = spanChk.checked;
var Chk = spanChk;
Parent = document.getElementById('ctl00_ContentPlaceHolder1_gvJobPosition');
var items = Parent.getElementsByTagName('input');
for (i = 0; i < items.length; i++) {
if (items[i].id != Chk && items[i].type == "checkbox") {
if (items[i].checked != IsChecked) {
items[i].click();
}
}
}
}
Here is the rendered HTML code:
<tr class="rgRow" id="ctl00_ContentPlaceHolder1_gvJobPosition_ctl00__0">
<td style="display:none;">0561fb4f-e410-4d83-a0e5-6d6d68fe3dba</td><td align="left">
<span class="category1" style="display:inline-block;width:15px;"><input id="ctl00_ContentPlaceHolder1_gvJobPosition_ctl00_ctl04_chkStatus" type="checkbox" name="ctl00$ContentPlaceHolder1$gvJobPosition$ctl00$ctl04$chkStatus" checked="checked" /></span>
</td><td align="left">
<span class="category2" style="display:inline-block;width:15px;"><input id="ctl00_ContentPlaceHolder1_gvJobPosition_ctl00_ctl04_chkStatuss" type="checkbox" name="ctl00$ContentPlaceHolder1$gvJobPosition$ctl00$ctl04$chkStatuss" /></span>
</td>