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

2 posts, 0 answers
  1. Attila Antal
    Admin
    Attila Antal avatar
    123 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;
    }
  2. merikmgrasp
    merikmgrasp avatar
    4 posts
    Member since:
    May 2007

    Posted 30 Mar in reply to Attila Antal Link to this post

    Thanks for this answer.  It does in fact work but unfortunately in our case, it is way too slow to be usable.

    Our databases are quite large and thus the filter list is large too.  In my example I have 1300 items in the filter checkbox list.

    In the provided sample method:

                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;
                }

    The item.set_checked() method called 1300 times in the for loop is taking between 30 and 40 seconds which makes it impracticable for clients to use.

    In the loop I tried bypassing the set_checked() method and instead getting the checkbox element and setting its checked property instead.  The loop then took less than a second to run, but when the grid's NeedDataSource method is called, the grid's filter expression (myGrid.MasterTableView.FilterExpression) is blank.

    I tried another workaround where in the loop I stored the checked item values in a string which I then store into session in an ajax call.  Then in the NeedDataSource method I built the filter expression for those checked items manually.  The problem then was that I needed to store the checked items for each column as multiple columns can be filtered at the same time.  Then there was also a problem with view state and the checked items.

    For now, I have just hidden the "Check All" checkbox in the filter dropdown using the CSS style:

            .rlbCheckAllItems { display: none; }

    If you have any other suggestions as to how to speed up that item.set_checked() method I'd love to hear them. Otherwise I will continue to simply hide the Check All option for now.

    Thanks

    Courtney

     

     

Back to Top