jQuery UI Widgets Forums Lists ListBox How to add multiple checkbox selected item to another list box

This topic contains 6 replies, has 3 voices, and was last updated by  yakirmanor 11 years, 9 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • mohan raj
    Member

    Hi,

    PFB my Code :

    $(‘#Lstlob’).bind(‘checkChange’, function(event) {
    var args = event.args;
    // var item = $(‘#Lstlob’).jqxListBox(‘getItem’, args.index);
    var value = args.label;
    var urlLOB = ‘@Url.Action(“PopulateFamilyList”)’;
    if (args.checked) {

    value = args.label;
    } else {
    value = ”;
    }

    $.ajax({
    type: “POST”,
    url: urlLOB,
    data: { strPlatfrom: value },
    success: function(returndata) {
    // $(‘#LstFamParent’).jqxListBox(‘clear’);

    $.each(returndata.data, function(index, objPlatfrms) {

    // $(“#LstFamParent”).jqxListBox({ source: returndata, checkboxes: true, width: 200, height: 200, theme: theme });
    $(“#LstFamParent”).jqxListBox(‘addItem’, objPlatfrms);
    });

    //
    }
    });

    I want to add mutiple checkbox selected items into another checkbox. But with the above code i am able to add only a single checkbox selected item. Please let me know who to add multiple selected items ASAP.

    Thanks,
    raj


    Peter Stoev
    Keymaster

    Hi raj,

    Here’s a small sample which adds multiple items to the jqxListBox.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.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>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    var source = [
    "Affogato",
    "Americano",
    "Bicerin",
    "Breve",
    "Café Bombón",
    "Café au lait",
    "Caffé Corretto",
    "Café Crema",
    "Caffé Latte",
    "Caffé macchiato",
    "Café mélange",
    "Coffee milk",
    "Cafe mocha",
    "Cappuccino",
    "Carajillo",
    "Cortado",
    "Cuban espresso",
    "Espresso",
    "Eiskaffee",
    "The Flat White",
    "Frappuccino"
    ];
    // Create a jqxListBox
    $("#jqxWidget").jqxListBox({ checkboxes: true, selectedIndex: 3, source: source, width: 200, height: 250, theme: theme });
    var data2 = ["Galao",
    "Greek frappé coffee",
    "Iced Coffee",
    "Indian filter coffee",
    "Instant coffee",
    "Irish coffee",
    "Liqueur coffee"];
    $.each(data2, function () {
    $("#jqxWidget").jqxListBox('addItem', { label: this });
    });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    mohan raj
    Member

    Hi Peter,

    I have 2 listboxes with checkbox. on selection of checkbox item in listbox1, the listbox2 has to be populated. On unselecting the checkbox item in listbox1, the item in listbox2 must be removed. I am able to do it for single item. I need it for multiple selection. removeAt() method accepts index. But in my case the index is dynamic. I want to items in Listbox to be removed based on label or value. Please provide some information.

    Thanks in advance!!!


    Peter Stoev
    Keymaster

    Hi mohan raj,

    To find an item’s index by label or value, take a look at the code snippet below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.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>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    var source = [
    "Affogato",
    "Americano",
    "Bicerin",
    "Breve",
    "Café Bombón",
    "Café au lait",
    "Caffé Corretto",
    "Café Crema",
    "Caffé Latte",
    "Caffé macchiato",
    "Café mélange",
    "Coffee milk",
    "Cafe mocha",
    "Cappuccino",
    "Carajillo",
    "Cortado",
    "Cuban espresso",
    "Espresso",
    "Eiskaffee",
    "The Flat White",
    "Frappuccino",
    "Galao",
    "Greek frappé coffee",
    "Iced Coffee",
    "Indian filter coffee",
    "Instant coffee",
    "Irish coffee",
    "Liqueur coffee"
    ];
    // Create a jqxListBox
    $("#jqxWidget").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250, theme: theme });
    var items = $("#jqxWidget").jqxListBox('getItems');
    var indexToRemove = -1;
    $.each(items, function (index) {
    if (this.label == "Cappuccino") {
    indexToRemove = index;
    return false;
    }
    });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </div>
    </body>
    </html>

    Hope this helps you.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    mohan raj
    Member

    Hi Peter,

    Thanks a lot!!!!!!!!!!!!!!!!

    regards,
    mohanraj


    yakirmanor
    Member

    by any chance there is a combination of the ListBox type ‘Custom Rendering’
    in this page:

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/rendering.htm?classic

    and the ListBox type ‘Checkboxes’
    in this page:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/checkboxes.htm?classic

    meaning on the left of each employee there will be a checkbox similar to the on in the ListBox type ‘Checkboxes’ example and the employee name or id will be returned ?
    could be a great deal of help.

    ps – i mean to have the ListBox type ‘Checkboxes’ example with an addition of a small pic between the checkbox itself and the name on the right of it is what im trying to create.
    like so:
    _
    | | img name

    here is a picture of what im trying to create:
    http://www.flickr.com/photos/74908757@N02/7883703918/

    • This reply was modified 11 years, 9 months ago by  yakirmanor.
    • This reply was modified 11 years, 9 months ago by  yakirmanor.

    yakirmanor
    Member

    never mind, you can see mine here:
    http://jsfiddle.net/yakirmanor/UDJaX/embedded/result/

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

You must be logged in to reply to this topic.