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

Tagged: , , ,

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    how to use insertAt on exit droplist Posts
  • May 6, 2012 at 6:00 pm how to use insertAt on exit droplist #3907

    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?
    May 7, 2012 at 4:52 am how to use insertAt on exit droplist #3910

    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

    May 7, 2012 at 6:55 am how to use insertAt on exit droplist #3911

    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???

    May 7, 2012 at 7:06 am how to use insertAt on exit droplist #3912

    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

    May 7, 2012 at 9:30 am how to use insertAt on exit droplist #3930

    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!

    May 7, 2012 at 11:23 am how to use insertAt on exit droplist #3941

    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

    May 7, 2012 at 11:47 am how to use insertAt on exit droplist #3946

    Nguyen Huu Hanh Lam
    Participant

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

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

You must be logged in to reply to this topic.