RadGrid, add "select All" to Context Menu columns

[Daniel]

Hello,

I'm currently working on a project with RadGrid.

It is possible to add to the list of the columns, "select all/none" checkbox?

Thanks,
Daniel

[Daniel]

I attach a picture that will explain the question in a more understandable.

Thanks,
Daniel

[Konstantin Dikov]

Hello Daniel,

There is now built-in functionality that could allow you to achieve such functionality, but you could get reference to the UL element holding the check boxes for the column's visibility and add a check box for selecting all.

Following is a very basic example for implementing such functionality, but please note that since the generated HTML is different in IE, some modifications and conditions should be applied on your end:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>

<telerik:RadCodeBlock runat="server">
    <script type="text/javascript">
        var columnsUL = null;
        var initialLoad = true;
        function columnContextMenu(sender, event) {
            if (initialLoad) {
                initialLoad = false;
                var grid = sender;
                var columnsUL = $telerik.$(".rgHCMCols")[0].parentElement.children[1].children[0];
                var checkAllElement = document.createElement("LI");
                var checkbox = document.createElement("INPUT");
                checkbox.type = "checkbox";
                var label = document.createElement("Label");
                label.innerHTML = "Select All";
                var wrappingSpan = document.createElement("SPAN");
                var wrappingDiv = document.createElement("DIV");
                wrappingSpan.appendChild(checkbox);
                wrappingSpan.appendChild(label);
                wrappingDiv.className = "rmText";
                wrappingDiv.appendChild(wrappingSpan);
                checkAllElement.appendChild(wrappingDiv);
                columnsUL.insertBefore(checkAllElement, columnsUL.children[0]);

                checkbox.onchange = function (e) {
                    for (var i = 1; i < columnsUL.children.length; i++) {
                        if (columnsUL.children[i].children[0].children[0].children[0].checked != e.target.checked) {
                            columnsUL.children[i].children[0].children[0].children[0].click();
                        }
                    }
                }
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" MasterTableView-EnableHeaderContextMenu="true">
    <ClientSettings>
        <ClientEvents OnColumnContextMenu="columnContextMenu" />
    </ClientSettings>
</telerik:RadGrid>

Hope the above is a good starting point for achieving the desired functionality.


Regards,
Konstantin Dikov
Telerik