locked
Is there an easy way to have WinJS.UI.ItemContainer behave like option elements

    Question

  • So that when one ItemContainer of a group is selected the others in the group are not selected?
    Friday, July 25, 2014 11:49 AM

Answers

  • Hi!

    If you are using an ItemContainer I assume you are not using a ListView, right? The whole point of the ItemContainer is to get the press/swipe/drag feature of a ListView without implementing a ListView.

    In that case, there is no "native" way of telling the ItemContainer that it's associated with other ItemContainers, but, you can do it programatically.

    Based on the documentation of the ItemContainer, you could add an event listener that enables the selected one but disables the others:

    <div id="ic1" data-itemcontainergroup="mygroup"
        data-win-control="WinJS.UI.ItemContainer">
    </div>
    
    <div id="ic2" data-itemcontainergroup="mygroup"
        data-win-control="WinJS.UI.ItemContainer">
    </div>
    
    <div id="ic3" data-itemcontainergroup="mygroup"
        data-win-control="WinJS.UI.ItemContainer">
    </div>

    I added a data attribute to define the group.

    Then, on JS, you could do something like:

    var controls = WinJS.Utilities.query('div[data-itemcontainergroup="mygroup"]');
    
    var deselectAllGroup = function(){
    controls.forEach(function(){
    this.winControl.selected=false;
    });
    };
    
    controls.forEach(function(){
    this.winControl.addEventListener("selectionchanged",function(){
    if(this.selected){
    //item was selected
    deselectAllGroup();
    this.selected=true;//set the selected again after clearing the group up
    }
    });
    });

    Hope it helps!

    • Marked as answer by pkursawe Wednesday, July 30, 2014 1:45 PM
    Wednesday, July 30, 2014 12:26 PM

All replies

  • Put them in to the ListBox? Or in ListView set SelectionMode as single.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, July 28, 2014 7:36 AM
    Moderator
  • Hi!

    If you are using an ItemContainer I assume you are not using a ListView, right? The whole point of the ItemContainer is to get the press/swipe/drag feature of a ListView without implementing a ListView.

    In that case, there is no "native" way of telling the ItemContainer that it's associated with other ItemContainers, but, you can do it programatically.

    Based on the documentation of the ItemContainer, you could add an event listener that enables the selected one but disables the others:

    <div id="ic1" data-itemcontainergroup="mygroup"
        data-win-control="WinJS.UI.ItemContainer">
    </div>
    
    <div id="ic2" data-itemcontainergroup="mygroup"
        data-win-control="WinJS.UI.ItemContainer">
    </div>
    
    <div id="ic3" data-itemcontainergroup="mygroup"
        data-win-control="WinJS.UI.ItemContainer">
    </div>

    I added a data attribute to define the group.

    Then, on JS, you could do something like:

    var controls = WinJS.Utilities.query('div[data-itemcontainergroup="mygroup"]');
    
    var deselectAllGroup = function(){
    controls.forEach(function(){
    this.winControl.selected=false;
    });
    };
    
    controls.forEach(function(){
    this.winControl.addEventListener("selectionchanged",function(){
    if(this.selected){
    //item was selected
    deselectAllGroup();
    this.selected=true;//set the selected again after clearing the group up
    }
    });
    });

    Hope it helps!

    • Marked as answer by pkursawe Wednesday, July 30, 2014 1:45 PM
    Wednesday, July 30, 2014 12:26 PM
  • Thanks, this looks what I came up with two!
    Wednesday, July 30, 2014 1:45 PM