如何为自动生成列的RadGrid所有列表头添加复选框并获取选中值

1. 动态添加表头复选框 #

因为AutoGenerateColumns=true，所有列都是自动生成的，我们可以在RadGrid的ColumnCreated事件中，为每个列的表头动态添加复选框：

protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
{
    // 针对所有自动生成的绑定列（包含文章类型列）
    if (e.Column is GridBoundColumn boundColumn)
    {
        // 为列绑定自定义表头模板
        boundColumn.HeaderTemplate = new GridHeaderCheckBoxTemplate(boundColumn.UniqueName, boundColumn.HeaderText);
    }
}

// 自定义表头模板类，实现ITemplate接口
public class GridHeaderCheckBoxTemplate : ITemplate
{
    private readonly string _columnUniqueName;
    private readonly string _headerText;

    public GridHeaderCheckBoxTemplate(string columnUniqueName, string headerText)
    {
        _columnUniqueName = columnUniqueName;
        _headerText = headerText;
    }

    public void InstantiateIn(Control container)
    {
        // 创建表头复选框
        CheckBox headerChk = new CheckBox
        {
            ID = $"chkHeader_{_columnUniqueName}",
            Text = _headerText,
            AutoPostBack = true // 开启回发以处理选中事件
        };
        // 绑定复选框状态变更事件
        headerChk.CheckedChanged += HeaderChk_CheckedChanged;

        container.Controls.Add(headerChk);
    }

    private void HeaderChk_CheckedChanged(object sender, EventArgs e)
    {
        CheckBox chk = (CheckBox)sender;
        string columnName = chk.ID.Replace("chkHeader_", "");
        bool isChecked = chk.Checked;

        // 可选：同步选中该列所有行的对应复选框（如果行内有复选框的话）
        foreach (GridDataItem item in RadGrid1.Items)
        {
            // 假设行内对应列有ID为chkRow的复选框，可根据实际调整
            CheckBox rowChk = item[columnName].FindControl("chkRow") as CheckBox;
            if (rowChk != null)
            {
                rowChk.Checked = isChecked;
            }
        }

        // 保存复选框状态到ViewState，避免回发丢失
        ViewState[$"HeaderChk_{columnName}"] = isChecked;
    }
}

2. 获取表头复选框选中值 #

在需要获取选中状态的场景（比如按钮点击事件），遍历所有列并读取对应表头复选框的状态：

protected void btnGetSelectedColumns_Click(object sender, EventArgs e)
{
    List<string> selectedColumnNames = new List<string>();
    GridHeaderItem headerItem = RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem;

    foreach (GridColumn col in RadGrid1.Columns)
    {
        if (col is GridBoundColumn boundColumn)
        {
            CheckBox headerChk = headerItem[boundColumn.UniqueName].FindControl($"chkHeader_{boundColumn.UniqueName}") as CheckBox;
            if (headerChk != null && headerChk.Checked)
            {
                selectedColumnNames.Add(boundColumn.UniqueName);
            }
        }
    }

    // 这里可以对选中的列名进行后续处理，比如输出或业务逻辑
    lblSelectedColumns.Text = "已选中的列：" + string.Join(", ", selectedColumnNames);
}

如果不想依赖服务器回发，可通过JavaScript+jQuery实现动态添加复选框和状态获取：

1. 页面加载后添加表头复选框 #

绑定RadGrid的OnClientLoaded事件，在网格加载完成后为表头添加复选框：

function onGridLoaded(sender, args) {
    // 遍历所有表头单元格
    $(".RadGrid th.rgHeader").each(function() {
        var $th = $(this);
        // 避免重复添加复选框
        if ($th.find(".header-checkbox").length === 0) {
            var originalText = $th.text().trim();
            // 创建复选框元素
            var $checkbox = $('<input type="checkbox" class="header-checkbox" />');
            // 清空原表头内容，重新拼接复选框和文本
            $th.empty().append($checkbox).append(" " + originalText);

            // 可选：绑定点击事件，同步选中该列所有行的复选框
            $checkbox.on("click", function() {
                var isChecked = $(this).is(":checked");
                var colIndex = $th.index();
                // 遍历所有数据行，设置对应列的复选框状态
                $(".RadGrid tr.rgRow, .RadGrid tr.rgAltRow").each(function() {
                    var $rowCheckbox = $(this).find("td").eq(colIndex).find(".row-checkbox");
                    if ($rowCheckbox.length > 0) {
                        $rowCheckbox.prop("checked", isChecked);
                    }
                });
            });
        }
    });
}

记得在RadGrid的属性中配置：OnClientLoaded="onGridLoaded"

2. 获取客户端复选框选中值 #

在需要获取状态的客户端事件（比如按钮点击）中，收集所有选中的表头复选框对应的列信息：

function getSelectedHeaderCheckboxes() {
    var selectedColumns = [];
    $(".RadGrid .header-checkbox:checked").each(function() {
        var columnName = $(this).closest("th").text().trim();
        selectedColumns.push(columnName);
    });

    // 可将选中列信息输出到控制台，或通过AJAX发送到服务器
    console.log("已选中的列：", selectedColumns);
    // 示例AJAX请求
    // $.ajax({
    //     url: "YourPage.aspx/ProcessSelectedColumns",
    //     type: "POST",
    //     contentType: "application/json; charset=utf-8",
    //     data: JSON.stringify({ columns: selectedColumns }),
    //     success: function(response) {
    //         // 处理服务器响应
    //     }
    // });
}

注意事项 #

• 后台方案中，因为AutoGenerateColumns=true，每次网格绑定数据都会重新生成列，ColumnCreated事件会重复触发，确保表头复选框被正确添加。
• 如果需要表头复选框控制行内复选框，需确保行内存在对应控件，可在RadGrid的ItemCreated事件中动态添加行内复选框。
• 客户端方案需注意Telerik RadGrid的默认皮肤类名（如rgHeader、rgRow），若使用自定义皮肤，需调整选择器匹配实际类名。

内容的提问来源于stack exchange，提问作者Jay K