#11813 closed defect (invalid)
NumberSpinner in Grid - FIREFOX issue when mouseClick in textarea of numberSpinner
| Reported by: | LeticiaGolubov | Owned by: | Bryan Forbes |
|---|---|---|---|
| Priority: | high | Milestone: | tbd |
| Component: | DojoX Grid | Version: | 1.4.3 |
| Keywords: | Cc: | Evan | |
| Blocked By: | Blocking: |
Description
I'm not able to place my cursor on anywhere other than the end of the text area of NumberSpinner? - and modifying the text can only be done by typing backspace to delete existing number then typing in the new number.
This only happens in Firefox (3.6.10 and previous versions too), but works as expected in Internet Explorer. See attached cursorFocus...
the grid's structure: var ${ns}structure = [
{ cells: [[
{ name: '<fmt:message key="poll_interval" bundle="${mc_langset}"/>', field: INTERVAL_COLUMN,
get:${ns}getCellContentInterval, width:'10em', styles: 'text-align: center;' }
]]}
];
This is how the widget is created inside the grid: function ${ns}getCellContentInterval(inRowIndex) {
var grid = ${ns}table.grid; var rowItem = grid.getItem(inRowIndex);
if (rowItem !== null) {
var id = grid.store.getValue(rowItem,'0'); if (${ns}isValidItem(id)) {
var interval = grid.store.getValue(rowItem, INTERVAL_COLUMN); if (interval == ) {
return ' '
} if(dijit.byId('templateId'+id)) {
dijit.byId('templateId'+id).destroyRecursive();
}
set timeout so that number spinner is created after the node is in place setTimeout(function() {
if (!dijit.byId('templateId'+id)) {
var newWidget = new dijit.form.NumberSpinner?({
style: "width:90px", value: interval, smallDelta: "10", maxlength: "5", constraints: {
min:0, max:99999, places:0
}
}, dojo.byId('templateId'+id)); dojo.connect(dojo.byId('templateId'+id), "onblur", dojo.hitch(this, "${ns}setInterval", id, inRowIndex)); }
}, 50);
return '<div id="' + 'templateId' + id + '"></div>';
}
[..........]
Attachments (5)
Change History (13)
Changed 9 years ago by
| Attachment: | cursorFocus.jpg added |
|---|
comment:1 Changed 9 years ago by
NOTE: that all other functions of the number spinner seem to work as expected.
BUT I noticed after I added debug to onmouseclick, and onfocus, via dojo.connect, that those functions were only called when the widget was created. onblur works as expected.
comment:2 Changed 9 years ago by
| Component: | General → DojoX Grid |
|---|---|
| Owner: | changed from anonymous to bryanforbes |
comment:3 Changed 9 years ago by
I investigated this further and stripped the code down to the bare minimum - the issue is still there, it's now even more obvious, it's almost impossible to direct focus to the textarea of the number spinner. Here's the full source for numberSpinnerOnGrid.jsp:
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01EN" "http://www.w3.org TR/html4strict.dtd">
<% String dojoRootPath = request.getContextPath() + "/scripts/DojoBuild"; %>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script> -->
<head> <style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style> <script src="<%=dojoRootPath%>/dojo/dojo.js" djConfig="parseOnLoad: true"> </script> <script type="text/javascript">
var grid=null; global var
dojo.require("dojox.grid.DataGrid?"); dojo.require("dojox.data.CsvStore?"); dojo.require("dijit.form.NumberSpinner?");
dojo.addOnLoad(function() { our test data store for this example: var store = new dojox.data.CsvStore?({
url: 'movies.csv'
});
set the layout structure: var layout = [{
field: 'Title', name: 'Title of Movie', width: '200px'
}, {
field: 'Year', name: 'Year', get: getYearSpinner, width: '150px'
}, {
field: 'Producer', name: 'Producer', width: 'auto'
}
];
create a new grid: grid = new dojox.grid.DataGrid?({
query: {
Title: '*'
}, store: store, clientSort: true, rowSelector: '20px', structure: layout
}, document.createElement('div'));
append the new grid to the div "gridContainer": dojo.byId("gridContainer").appendChild(grid.domNode);
Call startup, in order to render the grid: grid.startup();
});
function getYearSpinner(rowIndex) {
var year = grid.store.getValue(grid.getItem(rowIndex), 'Year');
var mySpinner = new dijit.form.NumberSpinner?({
value: year, smallDelta: 1, id: rowIndex, constraints: {
min: 1900, max: 2010, places: 0
},
style: "width:100px"
}, "spinnerId");
return mySpinner;
} </script> <link rel="stylesheet" type="text/css" href="<%=dojoRootPath%>/dijit/themes/tundra/tundra.css" />
<style type="text/css">
@import "<%=dojoRootPath%>/dojox/grid/resources/Grid.css"; @import "<%=dojoRootPath%>/dojox/grid/resources/tundraGrid.css"; .dojoxGrid table { margin: 0; } html, body { width: 100%; height: 100%; margin: 0; }
</style>
</head>
<body class="tundra"> <div id="gridContainer" style="width: 100%; height: 100%;"> </div> </body> </html>
=================================================================================== Here is movies.cvs, copy to same dir as numberSpinnerOnGrid.jsp above
Title, Year, Producer City of God, 2002, Katia Lund Rain, 2003, Christine Jeffs 2001: A Space Odyssey, 1969, Stanley Kubrick "This is a ""fake"" movie title", 1957, Sidney Lumet Alien, 1979, Ridley Scott "The Sequel to ""Dances With Wolves.""", 1982, Ridley Scott "Caine Mutiny, The", 1954, "Dymtryk ""the King"", Edward"
=================================================================================== I wonder if there's something incorrect with how I'm adding the number spinner to the data grid? Although I can't find any real recent examples on how to do this.
Changed 9 years ago by
| Attachment: | numberSpinnerOnGrid.jsp added |
|---|
Source code for testing number spinner on grid, copy movies.cvs to same dir
Changed 9 years ago by
| Attachment: | movies.csv added |
|---|
The datasource for test, taken from Dojo examples
comment:4 Changed 9 years ago by
I have added the source code for the test I ran, as coping and pasting directly from here caused too many errors.
The only adjustment needed is to <% String dojoRootPath = request.getContextPath() + "/scripts/DojoBuild"; %>
Any updates on this ticket?
Changed 9 years ago by
| Attachment: | gridwithnumberspinner.jpg added |
|---|
Grid with number spinner test, screenshot
comment:5 Changed 9 years ago by
| Owner: | changed from bryanforbes to Bryan Forbes |
|---|
comment:7 Changed 9 years ago by
| Cc: | evan added |
|---|---|
| Resolution: | → invalid |
| Status: | new → closed |
I attached a much simpler testcase. This is a user error. The DataGrid? instance should have specified selectable:true
comment:8 Changed 9 years ago by
| Cc: | Evan added; evan removed |
|---|
cursor Focus on textarea of number spinner