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, 1 month ago.
-
Author
-
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?
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 StoevjQWidgets Team
http://www.jqwidgets.comthanks!
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???
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 StoevjQWidgets Team
http://www.jqwidgets.comYes, i using jQWidgets 2.1…but still not working.
Can you show me an example for this?Thank you so much!
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 StoevjQWidgets Team
http://www.jqwidgets.comYesss! thanks you so much!
it working! thanks again! đŸ™‚ -
AuthorPosts
You must be logged in to reply to this topic.