jQWidgets Forums
jQuery UI Widgets › Forums › Lists › DropDownList › Tabbing across dropdownlist in grid
Tagged: jqxDropDownList
This topic contains 3 replies, has 2 voices, and was last updated by ivailo 9 years, 12 months ago.
-
Author
-
Hi–
I’ve got a grid column defined as dropdownlist.
The dropdown appears to work correctly, however if I use the tab key to navigate across a grid row, the dropdown selection is wiped out.That is, left-to-right I have a number column, a text column, a dropdownlist column, and a checkbox column. If my cursor is in the number column, and I tab right…
1) When the cursor reaches the dropdownlist column, even though there was a value showing, the list switches to “Please Choose:”
2) And if I tab again, the dropdown column is left emptyHow do I prevent this? Other libs which provide this functionality (e.g. jsgrid) do not disturb the menu selection if user tabs across them–that is the desired behavior.
Thanks
hi joelk,
Send a fiddle with your actual code for better analyze of the problem.
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comWell, here’s an example:
<!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="../../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.columnsresize.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/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript"> $(document).ready(function () { var tableData = [ { "ID": 100, "Name": "Type A", "Data Type": "UINT8", "Read": true, "Write": true }, { "ID": 101, "Name": "Type B", "Data Type": "UINT16", "Read": false, "Write": true }, { "ID": 102, "Name": "Type C", "Data Type": "UINT32", "Read": true, "Write": false }, { "ID": 103, "Name": "Type D", "Data Type": "UINT8", "Read": true, "Write": true } ]; var menuData = [ {"label": "UINT8", "value": "UINT8"}, {"label": "UINT16", "value": "UINT16"}, {"label": "UINT32", "value": "UINT32"}, {"label": "SINT8", "value": "SINT8"}, {"label": "SINT16", "value": "SINT16"}, {"label": "SINT32", "value": "SINT32"}, {"label": "FLOAT32", "value": "FLOAT32"}, {"label": "FLOAT64", "value": "FLOAT64"}, {"label": "BOOLEAN", "value": "BOOLEAN"}, {"label": "UTF8S", "value": "UTF8S"} ]; var menuSource = { datatype: "json", datafields: [ { name: 'label', type: 'string' }, { name: 'value', type: 'string' } ], localdata: menuData }; var menuDataAdapter = new $.jqx.dataAdapter(menuSource); var source = { datatype: "json", datafields: [ { name: 'ID'}, { name: 'Name'}, { name: 'Data Type'}, { name: 'Read'}, { name: 'Write'} ], localdata: tableData, }; var tableDataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid({ columns: [ { text: 'ID', datafield: 'ID', columntype: 'numberInput'}, { text: 'Name', datafield: 'Name', columntype: 'textbox'}, { text: 'Data Type', datafield: 'Data Type', columntype: 'dropdownlist', initeditor: function (row, cellvalue, editor) { editor.jqxDropDownList({displayMember: 'label', valueMember: 'value', source: menuDataAdapter}); } }, { text: 'Read', datafield: 'Read', columntype: 'checkbox'}, { text: 'Write', datafield: 'Write', columntype: 'checkbox'} ], editable: true, sortable: true, sorttogglestates: 2, source: tableDataAdapter, showsortmenuitems: false, width: 750, autoheight: true }); }); </script> </head> <body class='default'> <div id="jqxgrid"></div> </body> </html>
Hi joelk,
In this code when you select jqxDropDownList it changes the selected value to default value “”. This happens on click, tab, etc.
To prevent that behavior you have to add cellvaluechanging: function (){…}. In your case this will prevent emptying of the cell.Here is the javascript demo.
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.