jQuery UI Widgets Forums Lists ListBox add item to json bound list

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • add item to json bound list #22723

    laxcoburn
    Member

    I have a listbox that is bound to local json. I am new to Jq and have not been able to figure out how to add a new item

    here is the json:
    var DS_poitems = [
    {
    “batchrowid”:”6173″,
    “batchOeehId”:”333″,
    “batchLinenum”:”1″,
    “linestatus”:”Added to Batch”,
    “item”:”052000338775″,
    “sxeprodid”:”tac110″,
    “itemqyt”:”2″
    },

    {
    “batchrowid”:”6174″,
    “batchOeehId”:”333″,
    “batchLinenum”:”2″,
    “linestatus”:”Added to Batch”,
    “item”:”10000″,
    “sxeprodid”:”tac0010f”,
    “itemqyt”:”3″
    },

    {
    “batchrowid”:”6175″,
    “batchOeehId”:”333″,
    “batchLinenum”:”3″,
    “linestatus”:”Added to Batch”,
    “item”:”14″,
    “sxeprodid”:”12c90″,
    “itemqyt”:”4″
    },

    {
    “batchrowid”:”6176″,
    “batchOeehId”:”333″,
    “batchLinenum”:”4″,
    “linestatus”:”Added to Batch”,
    “item”:”1459″,
    “sxeprodid”:”TAC007F5″,
    “itemqyt”:”5″
    },

    {
    “batchrowid”:”6177″,
    “batchOeehId”:”333″,
    “batchLinenum”:”5″,
    “linestatus”:”Added to Batch”,
    “item”:”1460″,
    “sxeprodid”:”DP40630″,
    “itemqyt”:”3″
    },

    {
    “batchrowid”:”6178″,
    “batchOeehId”:”333″,
    “batchLinenum”:”6″,
    “linestatus”:”Added to Batch”,
    “item”:”1461″,
    “sxeprodid”:”TAC0010F3IFC”,
    “itemqyt”:”6″
    },

    {
    “batchrowid”:”6179″,
    “batchOeehId”:”333″,
    “batchLinenum”:”7″,
    “linestatus”:”Added to Batch”,
    “item”:”1462″,
    “sxeprodid”:”TAC0010F”,
    “itemqyt”:”3″
    },

    {
    “batchrowid”:”6180″,
    “batchOeehId”:”333″,
    “batchLinenum”:”8″,
    “linestatus”:”Added to Batch”,
    “item”:”1463″,
    “sxeprodid”:”TAC0011F”,
    “itemqyt”:”8″
    },

    {
    “batchrowid”:”6181″,
    “batchOeehId”:”333″,
    “batchLinenum”:”9″,
    “linestatus”:”Added to Batch”,
    “item”:”1465″,
    “sxeprodid”:”TAC0015MSFIFC”,
    “itemqyt”:”6″
    }]

    Here is the listbox:
    // prepare poitem the data
    var srcPOItems =
    {
    datatype: “json”,
    datafields: [
    { name: ‘batchrowid’, type: ‘number’ },
    { name: ‘batchOeehId’, type: ‘number’ },
    { name: ‘batchLinenum’, type: ‘number’ },
    { name: ‘linestatus’, type: ‘string’ },
    { name: ‘item’, type: ‘number’ },
    { name: ‘sxeprodid’, type: ‘string’ },
    { name: ‘itemqyt’, type: ‘number’ }
    ],
    localdata: DS_poitems
    };
    var dA_POItems = new $.jqx.dataAdapter(srcPOItems);
    // Create a jqxListBox
    $(“#jqxWidget”).jqxListBox({ source: dA_POItems, displayMember: “sxeprodid”, valueMember: “batchrowid”, width: 200, height: 250, theme: theme });
    $(“#jqxWidget”).on(‘select’, function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var valueelement = $(“

    “);
    valueelement.text(“Value: ” + item.value);
    var labelelement = $(“

    “);
    labelelement.text(“Label: ” + item.label);

    $(“#selectionlog”).children().remove();
    $(“#selectionlog”).append(labelelement);
    $(“#selectionlog”).append(valueelement);
    }
    }
    });

    //create addbutton
    $(“#btnAdd”).jqxButton({ width: ‘150’, height: ’25’, theme: theme });
    $(“#btnAdd”).bind(‘click’, function (event) {
    var item = {
    batchrowid: “1”,
    batchOeehI: “333”,
    batchLinenum: “100”,
    linestatus: “Added to Batch”,
    item: “New Freakin Item”,
    sxeprodid: “SXE PROD NEW”,
    itemqyt: “4”
    };

    $(“#jqxWidget”).jqxListBox(“insertAt”, item, 1);

    });

    When the item is added I get [object Object]. How can I add a new item from Json?

    add item to json bound list #22740

    Peter Stoev
    Keymaster

    Hi,

    You can add new items that are “String” or Object with the following fields:

    label – gets item’s label.
    value – gets the item’s value.
    disabled – gets whether the item is enabled/disabled.

    Best Regards,
    Peter Stoev

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

    add item to json bound list #22801

    laxcoburn
    Member

    So if I use $(“#jqxWidget”).jqxListBox(“insertAt”, item, 1);

    what would the var item statement look like.

    In my example I have it set to json. not sure how I wouls et it for label value and disabled.

    Also on the click event of the list I am able to get a column from the dataAdapter that is bound to the list but not shown in the list. Will I not be able to to this for items i add?

    add item to json bound list #22827

    Peter Stoev
    Keymaster

    Hi,

    var item should be an Object like: {label: “My Text”, value: “My Value”}

    To get the items displayed in the ListBox, you may use the “getItems” method.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.