jQuery UI Widgets Forums Navigation Tree Auto check / unchecked

This topic contains 4 replies, has 3 voices, and was last updated by  Dimitar 10 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Auto check / unchecked #23029

    antonomase
    Participant

    Hi,

    I have a long list of values in my jqxTree and some common values to check/uncheck are lost in this list.
    So, I’ve decided to put them twice in the list : one time at the top, one time at their right place.

    I want that these twin values become checked or unchecked at the same time : when I check the value at the top of the list, the other one will be also check

    – [] Territories
    —- [x] Terr1
    —- [ ] Terr2
    —- [ ] Terr3
    —- [x] Terr1
    —- [ ] Terr4
    —- [ ] Terr2

    Here is my code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1" />
    <link href="/dwh/js-jqwidgets/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="/dwh/js-jqwidgets/jqwidgets/styles/jqx.web.css" rel="stylesheet" type="text/css" />
    <link href="/dwh/css/css.css" rel="stylesheet" type="text/css" media="screen, projection, print" />
    <script src="/dwh/js-jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/dwh/js-jqwidgets/jqwidgets/jqx-all.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var source = [
    {label:"<b>All territories</b>", value:"TER*", checked:true, expanded:true,
    items: [{label:"<span style='color:red'>Terr1</span>", value:"TERFR411"},
    {label:"<span style='color:red'>Terr2</span>", value:"TERFR412"},
    {label:"Terr3", value:"TERFR711"},
    {label:"Terr1", value:"TERFR411"},
    {label:"Terr4", value:"TERFR712"},
    {label:"Terr2", value:"TERFR412"}]
    }];
    //Create the tree
    $('#jqxTree').jqxTree({
    source: source,
    hasThreeStates: true,
    checkboxes: true,
    width: '280px',
    theme: 'web' });
    //Event when a checkbox is check/unchecked
    $('#jqxTree').on('checkChange', function (event) {
    //Get the changed item
    var item = $('#jqxTree').jqxTree('getItem', event.args.element);
    if (item.level == 0) {return;}
    var checked = item.checked;
    var value = item.value;
    var id = item.id;
    //Get the list of items to test (depend if they must be checked or unchecked)
    if (item.level > 0) {
    if (checked) {
    var items = $('#jqxTree').jqxTree('getUncheckedItems');
    } else {
    var items = $('#jqxTree').jqxTree('getCheckedItems');
    }
    //Run through the tree and change the items with same value
    for (var i=0; i<items.length; i++) {
    if ((items[i].value == value) && (items[i].id != id) && items[i].level > 0) {
    $("#jqxTree").jqxTree('checkItem', items[i], checked);
    }
    }
    }
    });
    });
    </script>
    </head>
    <body>
    <div id='jqxTree'></div>
    </body>

    It’s run fine when I click on a Territory 1 to 4. But if I click on “All territories”, the script seems to recurse and all the territories become in the third state. I try to ban the script for item’s level 0, but it doesn’t work.

    I had this problem a long time ago with Visual Basic and I solved it with the event onclick instead of the event onchange. But with jqxtree, I do not have the click on both label and checlbox.

    Can somebody help me to make this script run fine ?
    Many thanks.

    • This topic was modified 11 years ago by  antonomase.
    • This topic was modified 11 years ago by  antonomase.
    Auto check / unchecked #23074

    Dimitar
    Participant

    Hi antonomase,

    The issue comes from the fact that when you check/uncheck the level 0 item, its and most of the others (depending on their current checkstate) items’ checkChange events are called – if you check the main item, the event is called 7 times.

    Best Regards,
    Dimitar

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

    Auto check / unchecked #23089

    antonomase
    Participant

    Hi Dimitar,

    Yes the checkChange events of all items are called. I try to imagine a solution where the checkChange events for items of level 1 do nothing when the item of level 0 is clicked. But I can’t find.

    Ow can I make the difference between a checkChange of level 1 called when an item of level 1 is clicked and a checkChange of level 1 called when the item of level 0 is called ?

    Do you have an idea for my problem ?

    Best regards

    Auto check / unchecked #46556

    marveen
    Participant

    i have the same issue, i need to update info , from the selected values..

    if i select father checkbox, just need to fire one time a method with all the selected child values , and then i update
    front end data.. but my problems is the CheckedChabge Fire to manny times… 🙁

    just need one time with all the selected vales , like ChangesFinished or Sommething..

    Thanks in advance, maybeee you have a work round for this..

    HOPE Existes!!..

    Auto check / unchecked #46567

    Dimitar
    Participant

    Hello marveen,

    If hasThreeStates is set to true, the checkChange event fires for every sub-item, whose checkstate needs to be updated in accordance with its parent’s. Unfortunately, we cannot offer you a workaround on the matter.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.