CODEWITHSUNDEEP
javascriptjquery
Dave Chen
Dave Chen

Reputation: 10975

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)

Upvotes: 2

Views: 1035

Answers (1)

Dave Chen
Dave Chen

Reputation: 10975

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>

Upvotes: 1

Related Questions