jQuery UI Widgets Forums Lists ListBox Save checkboxes states

This topic contains 2 replies, has 2 voices, and was last updated by  jan 10 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Save checkboxes states #52699

    jan
    Participant

    Hi!
    How to save checkboxes checked/unchecked state to cookies or memory?
    I am using checkboxes in listbox outside grid to show/hide columns. For columns there are autoloadstate, autosavestate. They are working. But checkboxes after page refres stay in checked or unchecked (checkIndex or uncheckIndex) state. Now I have

    $("#jqxlistbox").on('checkChange', function (event) {
            checkstate = $("#jqxlistbox").jqxListBox('getItems');
            localStorage.setItem("checks", checkstate);
    
            $("#jqxgrid").jqxGrid('beginupdate');
            if (event.args.checked) {
                $("#jqxgrid").jqxGrid('showcolumn', event.args.value);
            } else {
                $("#jqxgrid").jqxGrid('hidecolumn', event.args.value);
            }
            $("#jqxgrid").jqxGrid('endupdate');
        });

    At jqxlistbox there is source from listSource.

    var listSource = [
            {
            label: 'Samples',
            value: 'samp'
        }, ....

    onLoad start I have variable che = localStorage.checks;
    How to use che to bind checked/unchecked states to listbox checkboxes or cookies for this?

    Save checkboxes states #52761

    Dimitar
    Participant

    Hello jan,

    The following example shows how to save the checked listbox indexes in a cookie:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var checkedArray = $.jqx.cookie.cookie("jqxListBox_checkstate");
                if (checkedArray == undefined) {
                    checkedArray = [];
                } else {
                    checkedArray = checkedArray.split(",");
                };
    
                var source = [
                        "Affogato",
                        "Americano",
                        "Bicerin",
    		        ];
    
                // Create a jqxListBox
                $("#listbox").jqxListBox({ width: 200, source: source, checkboxes: true, height: 100 });
    
                for (var i = 0; i < checkedArray.length; i++) {
                    $("#listbox").jqxListBox('checkIndex', parseInt(checkedArray[i]));
                };
    
                $("#listbox").on('checkChange', function (event) {
                    var args = event.args;
                    if (args.checked == true) {
                        checkedArray.push(args.item.index);
                    } else {
                        var index = checkedArray.indexOf((args.item.index).toString());
                        if (index != -1) {
                            checkedArray.splice(index, 1);
                        };
                    };
    
                    $.jqx.cookie.cookie("jqxListBox_checkstate", checkedArray);
                });
            });
        </script>
    </head>
    <body>
        <div id="listbox">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Save checkboxes states #53006

    jan
    Participant

    Muchas Gracias!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.