jQWidgets Forums
jQuery UI Widgets › Forums › Lists › DropDownList › Drop Down List in Grid, make DD List dependent on another columns value
Tagged: DropDownList, editor, grid, jqxgrid
This topic contains 5 replies, has 4 voices, and was last updated by cberube 11 years, 8 months ago.
-
Author
-
June 12, 2013 at 2:10 pm Drop Down List in Grid, make DD List dependent on another columns value #23038
If I have two Drop Down columns in a grid, say Make and Model cars and if I have Toyota selected in row 1 and Ford selected in row two would it be possible to have the Make DD column show only Toyota cars in row 1 and Ford cars in row 2?
June 13, 2013 at 8:02 am Drop Down List in Grid, make DD List dependent on another columns value #23083Hello DaveB,
Here is an example, based on the demo Customized Editors. Instead of make and model, here are used Ship Country and Ship City.
<!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.8.3.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/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); // prepare the data var ordersSource = { datatype: "xml", datafields: [ { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' }, { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' }, { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' }, { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' }, { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' }, { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' } ], root: "entry", record: "content", id: 'm\\:properties>d\\:OrderID', url: "../sampledata/orders.xml", pager: function (pagenum, pagesize, oldpagenum) { // callback called when a page or page size is changed. }, updaterow: function (rowid, rowdata, result) { // synchronize with the server - send update command // call result with parameter true if the synchronization with the server is successful // and with parameter false if the synchronization failder. result(true); } }; var ordersAdapter = new $.jqx.dataAdapter(ordersSource); $("#jqxgrid").jqxGrid( { width: 670, source: ordersAdapter, theme: theme, selectionmode: 'singlecell', editable: true, pageable: true, autoheight: true, columns: [ { text: 'Ship Country', datafield: 'ShipCountry', width: 150, columntype: 'dropdownlist', createeditor: function (row, column, editor) { // assign a new data source to the dropdownlist. var list = ['Germany', 'Brazil', 'France']; editor.jqxDropDownList({ source: list }); }, // update the editor's value before saving it. cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { // return the old value, if the new value is empty. if (newvalue == "") return oldvalue; } }, { text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'combobox', initeditor: function (row, column, editor) { // assign a new data source to the combobox. var country = $('#jqxgrid').jqxGrid('getcellvalue', row, "ShipCountry"); var list; switch (country) { case "Germany": list = ['Stuttgart', 'Berlin']; break; case "Brazil": list = ['Rio de Janeiro', 'Brasília']; break; case "France": list = ['Strasbourg', 'Bordeaux']; break; }; editor.jqxComboBox({ source: list, promptText: "Please Choose:" }); }, // update the editor's value before saving it. cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { // return the old value, if the new value is empty. if (newvalue == "") return oldvalue; } }, { text: 'Ship Name', datafield: 'ShipName', columntype: 'combobox' } ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/July 7, 2013 at 6:05 pm Drop Down List in Grid, make DD List dependent on another columns value #24661Hello !
Don’t know if it is just me but this demo doesn’t seam to be working…
Changing the value of any DD doesn’t have any impact on the available options of the other two.
Also, what i think DaveB’s original question was… If i select Toyota in column A, only toyota related models should be visible in the model DD of column B.
I also need this abvious logic…
Thanks !
July 8, 2013 at 6:13 am Drop Down List in Grid, make DD List dependent on another columns value #24677Hello tuthmosis,
The answer to your question is found in the forum topic Need combobox or DD (Parent/Child).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/November 6, 2013 at 5:36 pm Drop Down List in Grid, make DD List dependent on another columns value #32073Looking for a way to bind to different lists. Do you have any examples on how to bind the value adapter into datafields: [].
{ name: ‘v1’, type: ‘string’, values: { source: ?.records, value: ‘value’, name: ‘label’ } },
createeditor: function (row, value, editor) {
if (row.empType = 0) {
editor.jqxDropDownList({ source: empType1, displayMember: ‘label’, valueMember: ‘value’ });
}
else {
editor.jqxDropDownList({ source: empType2, displayMember: ‘label’, valueMember: ‘value’ });
}
}Thanks,
November 6, 2013 at 9:38 pm Drop Down List in Grid, make DD List dependent on another columns value #32098What’s the best way to handle dropdownlist per row. Each row needs to bind to different values lists and it need to show the right label depending on the row type.
var empType1val = [
{ value: 5, label: “E” },
{ value: 4, label: “K” },
{ value: 3, label: “S” },
{ value: 2, label: “N” },
{ value: 1, label: “U” }
];var empType2val = [
{ value: 3, label: “E” },
{ value: 2, label: “S” },
{ value: 1, label: “U” }
];// this only works per columns
{ name: ‘v1’, type: ‘string’, values: { source: empType1.records, value: ‘value’, name: ‘label’ } },text: ‘Customer First’, datafield: ‘v1’, width: ‘10%’, align: ‘center’, cellsalign: ‘center’, columntype: ‘dropdownlist’,
createeditor: function (row, value, editor) {
var EJC = $(‘#empGrid’).jqxGrid(‘getcellvalue’, row, “EJC”);
if (prt.empType1.indexOf(EJC) != -1) {
editor.jqxDropDownList({ source: empType1, displayMember: ‘label’, valueMember: ‘value’ });
}
else {
editor.jqxDropDownList({ source: empType2, displayMember: ‘label’, valueMember: ‘value’ });
}
} -
AuthorPosts
You must be logged in to reply to this topic.