jQWidgets Forums

jQuery UI Widgets › Forums › General Discussions › Lists › DropDownList › How to add additional item to dropdownlist when sourced from json

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Mark 12 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    How to add additional item to dropdownlist when sourced from json Posts
  • September 2, 2012 at 5:32 pm How to add additional item to dropdownlist when sourced from json #7362

    Mark
    Member

    Hi,

    I receive some code where I am getting some values from a json ws and I want to add an additional item at the top “(new)” to allow users to select this to navigate to a new page. my code below

    var source = {
    datatype: "json",
    datafields: [
    { name: 'AdvertiserID' },
    { name: 'Name' }
    ],
    url: '@ViewBag.URL/Admin.svc/Advertisers',
    async: false
    }

    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#advertiser").jqxDropDownList({ source: dataAdapter, displayMember: 'Name', valueMember: 'AdvertiserID', width: '310px', height: '25px', theme: theme });

    I have tried three options without success
    1. I have tried to add the item to the dataAdapter records property (ensuring displayMember, valueMember and the uid make sense). On loadComplete i get a count which says I have the additional record, but it does not show.
    2. From the documentation I have tried addItem without success
    3. From the forum I have tried
    $("#advertiser").jqxDropDownList('insertItem', { label: 'My Item', value: 0 }, 0);

    So my question is firstly which method should I be using for this and how do I make this work?

    Thanks

    Mark

    September 2, 2012 at 5:35 pm How to add additional item to dropdownlist when sourced from json #7363

    Mark
    Member

    I am using version v2.34 in case that is important and testing in IE9

    September 2, 2012 at 8:20 pm How to add additional item to dropdownlist when sourced from json #7364

    Peter Stoev
    Keymaster

    Hi Mark.

    The issue is that there’s no ‘insertItem’ method. The method is called ‘insertAt’.

    Here’s a working sample as a solution: 

    <!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/jqxdata.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/jqxdropdownlist.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var url = "../sampledata/customers.txt";
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'CompanyName' },
                            { name: 'ContactName' }
                        ],
                        id: 'id',
                        url: url,
                        async: false
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    // Create a jqxDropDownList
                    $("#jqxWidget").jqxDropDownList({ selectedIndex: 0, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25 });
                    $("#jqxWidget").jqxDropDownList('insertAt', { label: 'My Item', value: 0 }, 0);
                });
            </script>
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    September 2, 2012 at 10:42 pm How to add additional item to dropdownlist when sourced from json #7365

    Mark
    Member

    Excellent Peter – apologies for my basic mistake.

    Thanks

    Mark

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.