Make "Check All" to include only displayed list options in Excel-like filtering

1 posts, 0 answers
  1. Attila Antal
    Attila Antal avatar
    55 posts

    Posted 27 Dec 2017 Link to this post


    Telerik Product and Version


    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    JavaScript, C#


    Clicking on "Check All" checkbox will check only displayed items when CheckList Filtering is enabled.

    C# - In the code behind, using the PreRender event of the Page, bind two event handlers to RadListBox holding the checkbox items.
    protected void Page_PreRender(object sender, EventArgs e)
        var lb = RadGrid1.FindControl("filterCheckList") as RadListBox;
        lb.OnClientLoad = "listBoxLoad";
        lb.OnClientCheckAllChecked = "CheckAllChecked";

    JavaScript - Client side code to manipulate the checklist items.
    var checkedState = false;
    function listBoxLoad(sender, args) {
        var checkAllCheckBox = sender.get_checkAllCheckBox();
        var checkAllItem = $(checkAllCheckBox).parents("li").first();
        checkAllItem.on("mousedown", function (event) {
            checkedState = checkAllCheckBox.checked;
    function CheckAllChecked(sender, args) {
        var items = sender.get_items();
        for (var i = 0; i < items.get_count() ; i++) {
            var item = items.getItem(i);
            item.set_checked(!checkedState && item.get_visible());
        sender.get_checkAllCheckBox().checked = !checkedState;
Back to Top