We have List and Tree Grids with "image" columns. Clicking on image in the column performs some action (ex, "delete" action in shopping cart).
Problem: Clicking on the image of the "image" type column causes page scrolling (seems like it's trying to auto-scroll to the grid) and does not fire the 'cellClick' event.
This happens only
1) in IE (in Firefox/Chrome works fine)
2) if ListGrid (or TreeGrid) does not fit the page (there is scrolling on the page).
3) if the grid is focusable (setting canFocus=false would solve the problem, but we need it to be focusable).
The real problem is that "cellClick" event in this case is not captured. Only the second click is. So the user has to click twice to perform the action.
Notice, that if the image column width bigger then image size, clicking on the cell outside the image DOES fire the event, so this is something with clicking on the image particular.
Here is a sample of the TreeGrid with "image" column:
Is there a way to prevent scrolling in IE? or at least fix the event issue?
Problem: Clicking on the image of the "image" type column causes page scrolling (seems like it's trying to auto-scroll to the grid) and does not fire the 'cellClick' event.
This happens only
1) in IE (in Firefox/Chrome works fine)
2) if ListGrid (or TreeGrid) does not fit the page (there is scrolling on the page).
3) if the grid is focusable (setting canFocus=false would solve the problem, but we need it to be focusable).
The real problem is that "cellClick" event in this case is not captured. Only the second click is. So the user has to click twice to perform the action.
Notice, that if the image column width bigger then image size, clicking on the cell outside the image DOES fire the event, so this is something with clicking on the image particular.
Here is a sample of the TreeGrid with "image" column:
Code:
isc.TreeGrid.create({ ID:bm.getId("tree"), autoFitMaxWidth:400, indentSize:"8", dataSource:bm.getId("tree$ds"), width:"100%", height:"100%", iconSize:"0", autoFetchData:true, sortField:"sortOrder", showConnectors:false, leaveScrollbarGap:false, showDetailFields:false, canPickFields:false, singleCellValueProperty:"singleCellValue", fields: [{title:"<nobr>String <\/nobr>",name:"label",align:"left",canEdit:false,canSort:false,validateOnChange:true,width:"100%"}, {title:" ",name:"getPrice",align:"right",canEdit:false,canSort:false,validateOnChange:true,width:"60"}, {type:"image",showTitle:false,imageHeight:"imageHeight",imageWidth:"imageWidth",imageURLPrefix:"\/cwf\/r\/", getCellValue:CbTree.getCellValue,name:"getImage",align:"right",canEdit:false,validateOnChange:true,width:"16"}], dataProperties:{openProperty:"isOpen",isFolderProperty:"isFolder"}, wrapCells:true, fixedRecordHeights:false, selectionChanged:CbTree.selectionChanged, dataArrived:CbTree.dataArrived, folderOpened:CbTree.treeNodeOpened, folderClosed:CbTree.treeNodeClosed, editComplete:CbTree.treeEditComplete, cellClick:CbTree.clickTreeCell, recordDoubleClick:CbTree.doubleClickTree, showHeader:false,canSelectText:true, baseStyle:"blendInGridCell"})
Comment