Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Tree&ListGrid in IE8: Click on Image column causing grid scroll

    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:
    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&nbsp;<\/nobr>",name:"label",align:"left",canEdit:false,canSort:false,validateOnChange:true,width:"100%"},
    		{title:"&nbsp;",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"})
    Is there a way to prevent scrolling in IE? or at least fix the event issue?

    #2
    The scrolling is a native browser behavior mandated by accessibility (focused elements must be on screen). What you can do is use cellMouseDown instead of cellClick.

    Comment


      #3
      1) The image element in the column itself is completely visible on the screen at this moment (though the grid is only partially).
      2) Using cellMouseDown event did not help. The behavior is exactly the same - the very first mouse down event on the image element is not captured.
      3) the scrolling is not the issue, the issue is the missing event.

      I tried to reproduce it using ListGrid sample with the flags image column from the feature explorer. It also does scrolling but at least the event is still working.
      There is possibly something else that could block the event?

      Comment


        #4
        You've got a lot of overrides that could be responsible, eg, you have a getCellValue that might be returning HTML with native event handlers or other settings. Try removing overrides until you're closer to the sample, then we can advise on why specific overrides might cause the issue.

        Comment


          #5
          Yep, I did. Before posting the message on the forum, I spent half a day playing with settings/events of ListGrid and TreeGrid.
          getCellValue for the image column returns the image path, no HTML or java script.
          I tried to remove all event overrides except cellClick, I removed any suspicious property of the image column trying to find anything that can cause the blocking behavior. I also tried static URL path (without using "getCellValue"). Same thing.

          The only one thing I can think of - there is a certain difference between clicking on the image itself and clicking just on the cell (outside of the image). It certainly the image element causes the scrolling (or maybe it passes the focus to the grid which causes scrolling) and blocks the event.

          This is pretty serious issue for us, so I need a clue how can I fix that "default" behavior for the image in the grid.

          Comment


            #6
            Didn't you just indicate that in the SDK sample the behavior is fine? If so, but you can't get the behavior you want in your grid, then there must still be customizations you haven't removed which are the true cause of the problem. You might try moving this code to an entirely separate file to eliminate the possibility that you're getting an obscure interaction with customizations you've made to the framework (skinning, etc).

            Comment


              #7
              Ok, I managed to reproduce it with the feature explorer.
              Here is the sample:
              Code:
              isc.VLayout.create({
                  width: "100%",
                  height: 900,
                  border:"1px solid blue", layoutMargin:5,
                  members: [
              isc.ListGrid.create({
                  ID: "countryList",
                  width:500, height:800, alternateRecordStyles:true,
                  data: countryData,
                  cellClick: function() { window.alert("CLICK"); },
                  fields:[
                      {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", 
                         getCellValue: function(viewer, record, recordNum, field, fieldNum, value) { return record.countryCode + ".png"; } },
                      {name:"countryName", title:"Country"},
                      {name:"capital", title:"Capital", showIf:"false"},
                      {name:"continent", title:"Continent"}
                  ]
              })    ]
              });
              Steps:
              (0. I overrode "cellClick" so it's supposed to show an alert message.)
              1. Copy&paste it in the feature explorer "JS" tab, then "Try"
              2. Make the browser window small enough, so the ListGrid is not completely visible.
              3. (Important) Click on the text above the "View" Tab. That makes the list lose the focus.
              4. Try to click on the image of any image column (for example, of the last visible row).
              5. First click makes the ListGrid scroll but does not show the message.
              6. As soon as the ListGrid grabs the focus, it does scroll, but still show the message.

              I guess grabbing focus in IE cancels the event.

              Comment


                #8
                We're getting the event reliably with your test. IE8 8.0.60001.18702 WinXP SP3.

                Immediately before clicking on the flag for Indonesia, the browser looked as shown in the screenshot. And yes, we ensured focus was not on the grid.
                Attached Files

                Comment


                  #9
                  You did not use my sample, did you?
                  In your test the ListGrid at this moment completely visible, just has horizontal and vertical scrollings.
                  In my sample the ListGrid is inside a VLayout and only partially visible. The layout has scrolling, not the ListGrid.
                  Click on the text above (or click on the scroll bar), so the focus is not on the list grid.
                  Then click on the Indonesia flag - list scrolls and no message. Click on the Indonesia flag again - the message pops up.

                  Exactly same: IE8 8.0.60001.18702 WinXP SP3.

                  Updated:
                  It's important: the vertical scrollbar of the layout should be at the start position.
                  Click on the flag - scrollbar jumps, no message.
                  Move the scrollbar back to the start position - click - again no message.
                  Attached Files
                  Last edited by ESherbakova; 14 Apr 2010, 05:28.

                  Comment


                    #10
                    Yes, we did use your sample code, but no, your sample code does not introduce scrolling on the Layout (the default overflow setting of Layout classes is "visible"), and the scrollbars you see in the screenshot we posted are not from the grid, they're from the TabSet.

                    Likewise, in our screenshot the ListGrid is partially occluded (note the first row is not "United States"). We tried many scenarios of partial occlusion, and the event fired every time.

                    If you still think there's a problem here, please provide very very exact instructions for reproducing.

                    Comment


                      #11
                      This is actually very frustrating that I have to repeat it many times.
                      1. Go to feature explorer. Open Grids-> Appearance->Column Order.
                      2. Go to JS tab. Paste the code (exactly that I provided):
                      Code:
                      isc.VLayout.create({
                          width: "100%",
                          height: 900,
                          border:"1px solid blue", layoutMargin:5,
                          members: [
                      isc.ListGrid.create({
                          ID: "countryList",
                          width:500, height:800, alternateRecordStyles:true,
                          data: countryData,
                          cellClick: function() { window.alert("CLICK"); },
                          fields:[
                              {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", 
                                 getCellValue: function(viewer, record, recordNum, field, fieldNum, value) { return record.countryCode + ".png"; } },
                              {name:"countryName", title:"Country"},
                              {name:"capital", title:"Capital", showIf:"false"},
                              {name:"continent", title:"Continent"}
                          ]
                      })    ]
                      });
                      Notice that the layout and the list grid have fixed heights. So the layout would have scrolling but the ListGrid itself will not.
                      3. "Try it". Make browser window ~ 800x600. You will see vertical scrolling.
                      4. Click on the text above.
                      5. Click on the Indonesia flag (last row) - no message.

                      Clicking on flags up to Spain works fine (actually message pops up with visible delay, but it does),
                      and only last 2 rows - not.

                      In our application the page has quite big height and only first level layout has scrolling, so tables and trees sometimes are at the bottom of the screen and half-visible. In our application clicking on ANY image in the grid does not work.

                      Please take it serious. All I need is to know what is going on when click on the image happens and is there workaround to avoid canceling the event.

                      Comment


                        #12
                        It should be very clear that we are taking the report seriously given the number of times we've been willing to follow instructions that don't work to reproduce this issue - that is certainly very frustrating. Finally, the issue is now reproducible at the specific screen size you mentioned.

                        This is yet another obscure IE bug (actually, the interaction between two bugs in IE). We're looking for a workaround.

                        Comment


                          #13
                          The issue here was caused by the list grid body recieving native focus. In IE this causes the body to scroll fully into view and there was a timing related issue that was breaking row-click

                          We've fixed this issue in our mainline codebase and put together a patch for 7.0rc2 - available here:
                          http://forums.smartclient.com/showthread.php?t=10783

                          Now you'll still see the standard native behavior of the ListGrid's body scrolling completely into view, and all click handlers will fire successfully.

                          Comment


                            #14
                            Thank you very much! :)

                            Comment

                            Working...
                            X