Dave Chen Dave Chen - 3 months ago 25
Javascript Question

How to add items into a group with jqxListbox

I'm trying to add items into a group within a jqxListbox, but using the group property while adding doesn't seem to work. I've read the relevant api, where it says

group - determines the item's group
.



$(document).ready(function() {
var source = [{
label: "Peppermint Hot Chocolate",
value: "phc",
group: "First group"
}, {
label: "Salted Caramel Hot Chocolate",
value: "schc",
group: "Second group"
}, {
label: "White Hot Chocolate",
value: "whc",
group: "Third group"
}];

$("#drinks").jqxListBox({
width: 300,
height: 300,
source: source
});

$("#add_item").click(function() {
$("#drinks").jqxListBox('addItem', {
label: 'Regular Hot Chocolate',
value: 'rhc',
group: 'Second group'
});
});
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />

<button id="add_item">Add item</button>
<div id="drinks"></div>





I'm trying to get the new item to go into the second group, as opposed to just being appended onto the list without a group. What can I try?

I found this, so
addItem
is out the window, how can
insertItem
be used to insert it in the correct group? (Assuming the group doesn't exist already)

Answer

So I got it working by changing the source data, then refreshing:

source.push({ label: 'Regular Hot Chocolate', value: 'rhc', group :'Second group'});              
$("#drinks").jqxListBox('refresh', true);

Example from the question:

$(document).ready(function() {
  var source = [{
    label: "Peppermint Hot Chocolate",
    value: "phc",
    group: "First group"
  }, {
    label: "Salted Caramel Hot Chocolate",
    value: "schc",
    group: "Second group"
  }, {
    label: "White Hot Chocolate",
    value: "whc",
    group: "Third group"
  }];

  $("#drinks").jqxListBox({
    width: 300,
    height: 300,
    source: source
  });

  $("#add_item").click(function() {
    source.push({ label: 'Regular Hot Chocolate', value: 'rhc', group :'Second group'});			  
    $("#drinks").jqxListBox('refresh', true);
  });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />

<button id="add_item">Add item</button>
<div id="drinks"></div>