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

1 posts, 0 answers
  1. Attila Antal
    Admin
    Attila Antal avatar
    26 posts

    Posted 27 Dec 2017 Link to this post

    Requirements

    Telerik Product and Version

    3.5+

    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    JavaScript, C#

    PROJECT DESCRIPTION 

    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