jQWidgets Forums
jQuery UI Widgets › Forums › Grid › jqxGrid’s dropdownlist column behvaior
Tagged: jqxGrid DropDownList
This topic contains 2 replies, has 1 voice, and was last updated by rcm01 12 years, 2 months ago.
-
Author
-
In the jqxGrid demo for customized editors there is one behavior and one styling that I am unable to replicate,
1. For behavior, when you tab or use arrows to navigate to the second column then press the “enter” key or any alpha/numeric key the dropdownlist widget is activated. Pressing the first letter of an item in the list will change it dropdownlist to that value in the demo but not in mine.
2. For appearance, when clicking on the dropdowlist, the list is flush with the widget in the demo but there is a small gap in mine.
What would I need to change to duplicate the above in my code?
Here’s the code
@{ ViewBag.Title = "Index";}@section scripts { <script type="text/javascript" src="~/scripts/jqwidgets/jqx-all.js"></script> <link rel="stylesheet" type="text/css" href="~/scripts/jqwidgets/styles/jqx.base.css" /> <link rel="stylesheet" type="text/css" href="~/scripts/jqwidgets/styles/jqx.metro.css" /> <script type="text/javascript"> $(document).ready(function () { //debugger; var myDropDownData = {}; myDropDownData[0] = { ddID: 1, ddName: "A1" }; myDropDownData[1] = { ddID: 2, ddName: "B1" }; myDropDownData[2] = { ddID: 3, ddName: "C1" }; var blankSource = { unboundmode: true, totalrecords: 15, datafields: [ { name: 'Column1', type: 'string' }, { name: 'Column2', type: 'string' } ] } var dataAdapter = new $.jqx.dataAdapter(blankSource); $("#jqxgrid").jqxGrid( { width: 920, source: dataAdapter, theme: "metro", selectionmode: 'singlecell', editable: true, autoheight: true, columnsresize: true, columns: [ { text: "Column 1", datafield: "Column1" } , { text: "Column 2" , width: 100 , datafield: "Column2" , columntype: 'dropdownlist' , createeditor: function (row, column, editor) { // assign a new data source to the dropdownlist. //editor.jqxDropDownList({ source: myDropDownData, displayMember: "ddName", valueMember: "ddID" }); var list = ['a1', 'b2', 'b3']; editor.jqxDropDownList({ source: list, autOpen: true }); } , cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { if (newvalue == "") return oldvalue; } } ] }); }); </script>}<body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div style="float: left;" id="jqxgrid"></div> </div></body>
One more note concerning this. I did correct the column setting from autOpen to autoOpen. When this is set correctly, the gap I mentioned above prevents you from selecting a value with a mouse click since focus is lost.
-
AuthorPosts
You must be logged in to reply to this topic.