jQuery UI Widgets Forums Lists DropDownList how to use insertAt on exit droplist

This topic contains 6 replies, has 2 voices, and was last updated by  Nguyen Huu Hanh Lam 11 years, 7 months ago.

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

  • Nguyen Huu Hanh Lam
    Participant

    i have code

    var department_list = {
    			datatype: "json",
    			datafields:[
    				{name:"departmentid"},
    				{name:"departmentname"}],
                url: "../department/department.grid.php"
    		};
    		var dataAdapter = new $.jqx.dataAdapter(department_list);
    		$("#_department").jqxDropDownList({
    			source: dataAdapter,
    			displayMember: "departmentname",
    			valueMember: "departmentid",
    			selectedIndex: 0
    		});
    how can i using insertAt method for this case?

    Peter Stoev
    Keymaster

    To insert a new item with Value and Display members, you can do this:

      $("#jqxWidget").jqxDropDownList('insertAt', { label: 'My Item', value: 'My Value' });

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Nguyen Huu Hanh Lam
    Participant

    thanks!

    i try
    $(“#_department”).jqxDropDownList(‘insertAt’, { label: ‘My Item’, value: ‘My Value’ });

    and

    $(“#_department”).jqxDropDownList(‘insertAt’, { departmentname: ‘—‘, departmentid: 0 }, 0);

    both of them… but it not working, it only working when source is array i dont know why???


    Peter Stoev
    Keymaster

    Do you use jQWidgets 2.1? I tried the code before writing you with data source which was a dataAdapter bound to remote JSON data.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Nguyen Huu Hanh Lam
    Participant

    Yes, i using jQWidgets 2.1…but still not working.
    Can you show me an example for this?

    Thank you so much!


    Peter Stoev
    Keymaster

    Here’s an example that I hope will help you:

    <!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/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 theme = '';
    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 jqxComboBox
    $("#jqxWidget").jqxDropDownList({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme });
    $("#jqxWidget").jqxDropDownList('insertAt', { label: "My Item", value: "My Value" }, 0);
    // bind to the select event and display the selected item and its value.
    $("#jqxWidget").bind('select', function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var valueelement = $("<div></div>");
    valueelement.html("Value: " + item.value);
    var labelelement = $("<div></div>");
    labelelement.html("Label: " + item.label);
    $("#selectionlog").children().remove();
    $("#selectionlog").append(labelelement);
    $("#selectionlog").append(valueelement);
    }
    }
    });
    // select the first item.
    $("#jqxWidget").jqxDropDownList('selectedIndex', 0);
    });
    </script>
    <div id='jqxWidget'>
    </div>
    <div id="selectionlog"></div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Nguyen Huu Hanh Lam
    Participant

    Yesss! thanks you so much!
    it working! thanks again! đŸ™‚

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

You must be logged in to reply to this topic.