jQWidgets Forums
jQuery UI Widgets › Forums › Grid › jqxGrid with Dropdownlist checkboxes
Tagged: checkbox, DropDownList, foreign data source, grid
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 3 months ago.
-
Author
-
Hello,
I want to create add a dropdownlist to my grid but with multiple choice!
This example show how to do it :
But i need to compile this example with this one : . This example show how to create a dropdownlist with one value list and one key list.So, what i need is to create a dropdownlist with multiple choice with one list with choices saved in database and one other list which listed all choice possible … ?
Best regards,
RidbarkHi Ridbark,
Here’s a sample with DropDownList with multiple choices: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellcustomediting.htm?arctic
The DropDownList’s displayMember and valueMember properties specify the Label and Value of each Item.Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for your answer.
But it’s not really what i need!
I create a jsfiddle to show you what i need and what is wrong : jsfiddle exampleThere are two list : “tomany” which have all possibilities (came from database, id and name associated) and there are “data” which have only ID (came from database too).
In fact, i need that the “tomany” source list be use in dropdownlist : that is allright.
But when i select one or more item and i finish the operation, there are only number and not the words associated to this ID in tomany list!Can you help me?
Best regards,
RidbarkHi Ridbark,
The problem is that your Grid’s source is missing the product names. The main source which you use to bind the Grid has only IDs. The only thing which you did is to update the DropDownList editor’s data source and it has Label and Value, but the Column does not.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Allright, so i add the name in my main source list. It’s allright when it starts, but it’s wrong after! Look : jsfiddle link
Can you modify this jsfiddle and show me how to do, please?
Best regards,
RidbarkHi Ridbark,
Here’s a sample:
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>This example illustrates the Grid filtering feature. Enter some data into the Filter Row.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.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> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { $(document).ready(function () { var tomany = {}; tomany["productname"] = [ { id: 1, name: "Black Tea" }, { id: 2, name: "Green Tea" }, { id: 3, name: "Caffe Espresso" }, { id: 4, name: "Doubleshot Espresso" }, { id: 5, name: "Caffe Latte" }, { id: 6, name: "White Chocolate Mocha" }, { id: 7, name: "Caramel Latte" }, { id: 8, name: "Caffe Americano" }, { id: 9, name: "Cappuccino" }, { id: 10, name: "Espresso Truffle" }, { id: 11, name: "Espresso con Panna" }, { id: 12, name: "Peppermint Mocha Twist" }]; var tomanySource = { datatype: "json", datafields: [ { name: 'id', type: 'integer' }, { name: 'name', type: 'string' } ], localdata: tomany }; var tomanyAdapter = new $.jqx.dataAdapter(tomanySource); // prepare the data var data = { '0': { 'productid': [1], 'productname': ["Black Tea"] }, '1': { 'productid': [2, 10], 'productname': ["Green Tea", "Espresso Truffle"] } }; var source = { localdata: data, datatype: "array", datafields: [ { name: 'productid', type: 'string', value: 'productid', values: { source: tomanyAdapter.records, value: 'id', name: 'name' } }, { name: 'productname', type: 'string', value: 'productid', values: { source: tomanyAdapter.records, value: 'id', name: 'name' } } ] }; var dataAdapter = new $.jqx.dataAdapter(source); dataAdapter.dataBind(); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 500, source: dataAdapter, editable: true, selectionmode: 'singlecell', columns: [ { text: 'Products', columntype: 'template', datafield: 'productid', displayfield: 'productname', createeditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. editor.jqxDropDownList({ checkboxes: true, source: tomanyAdapter, width: '100%', displayMember: 'name', valueMember: 'id', selectionRenderer: function () { return "Please Choose:"; } }); }, initeditor: function (row, cellvalue, editor, celltext, pressedkey) { // set the editor's current value. The callback is called each time the editor is displayed. var items = editor.jqxDropDownList('getItems'); editor.jqxDropDownList('uncheckAll'); if (cellvalue != undefined) { var values = cellvalue.split(/,\s*/); for (var j = 0; j < values.length; j++) { for (var i = 0; i < items.length; i++) { if (items[i].value == values[j]) { editor.jqxDropDownList('checkIndex', i); } } } } }, geteditorvalue: function (row, cellvalue, editor) { // return the editor's value. var checkedItems = editor.jqxDropDownList('getCheckedItems'); var label = ""; for (var i = 0; i < checkedItems.length; i++) { label += checkedItems[i].label; if (i < checkedItems.length - 1) label += ", "; } return { label: label, value: editor.val() } } }, ] }); }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" /> </body> </html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.