jQuery UI Widgets › Forums › Lists › ComboBox › Group by field in json data
Tagged: Angular combobox, categories, combobox, datafield, group, grouping, jquery combobox, jqxComboBox, json, source
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 6 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
Is it possible to group by one of the fields returned?
if (vFilterType == 'SiteFilter') { var SiteListurl = "WebServices/OriasWcfService.svc/GetSiteList"; var SiteListsource = { datatype: "json", datafields: [ { name: 'demSiteID' }, { name: 'Site' }, { group: 'SitePrefix'} ], id: 'demSiteID', url: SiteListurl, async: false }; var SiteListdataAdapter = new $.jqx.dataAdapter(SiteListsource); // Create a jqxComboBox $("#jqxWidget_SiteList").jqxComboBox({ checkboxes: true, source: SiteListdataAdapter, displayMember: "Site", valueMember: "demSiteID", //groupMember: "SitePrefix", width: 300, height: 25, dropDownHeight: 400 });
For example, have the combobox group by the ‘SitePrefix’ field with the appropriate check boxes for sites underneath?
Hello sjkcwatson,
Here is how to achieve this functionality:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.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/jqxcombobox.js"></script> </head> <body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var JSONData = [{ demSiteID: 1, Site: 'google.com', SitePrefix: 'www' }, { demSiteID: 2, Site: 'wikipedia.org', SitePrefix: 'en' }, { demSiteID: 3, Site: 'jqwidgets.com', SitePrefix: 'www'}]; // prepare the data var source = { datatype: "json", datafields: [ { name: 'demSiteID', type: 'number' }, { name: 'Site', type: 'string' }, { name: 'SitePrefix', type: 'string' } ], localdata: JSONData, async: false }; var dataAdapter = new $.jqx.dataAdapter(source, { beforeLoadComplete: function (data) { var groupSource = []; for (var i = 0; i < data.length; i++) { groupSource.push({ label: data[i].Site, group: data[i].SitePrefix }); } return groupSource; } }); // Create a jqxComboBox $("#jqxWidget").jqxComboBox({ selectedIndex: 0, source: dataAdapter, width: 200, height: 25 }); }); </script> <div id='jqxWidget'> </div> <div style="font-size: 12px; font-family: Verdana;" id="selectionlog"> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.