multi-row-marker autoscrolls to top....

Hi Alex

Having an issue with the 2.0.1 release.

When i use multi-row-marker selection mode each time a row is selected the grid automatically scrolls to the top.

I noticed that the same happens in your multi-row-marker sample grid.

The standard multi-row selection mode does not have the same issue.

Is there something I can do to turn this off?

Many Thanks

Felix

August 1,

I have the same problem. pls advise.

Jaralu

August 4,

I also have the same issue but with multi-row and multi-row-marker.

Sean

August 11,

Just adding myself to the waiting for solution for this issue list.

Thanks.

Roy

August 14,

Yes, I need a fix for this as well.

Any Ideas?

Here is an example. Just scroll down and select a row.

<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
    <script src="../../runtime/lib/aw.js"></script>
    <!-- grid format -->
    <style>
        .aw-grid-control {height: 100; width: 100%; margin: 0px; border: none; font: menu;}
        .aw-row-selector {text-align: center}
        .aw-column-0 {width:  80px;}
        .aw-column-1 {width: 200px;}
        .aw-column-2 {text-align: right;}
        .aw-column-3 {text-align: right;}
        .aw-column-4 {text-align: right;}
    </style>
</head>
<body>
    <script>
    
    var obj = new AW.UI.Grid;
    obj.getHeaderText =  function (i) {return  "Column " + i };
    obj.getCellText = function (i,j) {return i + ',' + j};
    obj.getHeaderText =  function (i) {return i };
    
    obj.setRowCount(50);
    obj.setColumnCount(5);
    obj.setSelectionMode("multi-row-marker");
    document.write(obj);

    </script>  
</body>
</html>

Mike Graessle

August 18,

I do not consider "this" a workaround, but a provisional/partial patch, cause it include 2 "undesired" effects.
1- flicker -- by scroll up, and then down to selected mark-row.
2- when unselect it scrolls to last selected mark [ I need it ??, or no idea how to avoid it 8-( ]

obj.onSelectedRowsChanged = function(arrayOfRowIndices){
       this.timeout(function(){
       this.setCurrentRow(arrayOfRowIndices[arrayOfRowIndices.length - 1]);
       },0);
}

Carlos

August 18,

Well, seems to be more easy than that, ( simplest always better),
just try:

obj.onSelectedRowsChanged = function(){return true;}

Carlos

August 18,

But if you want to keep the second side effect ( scroll to last marked-row) really useful in many cases, then use:

var AORI_length ;

 obj.onSelectedRowsChanged = function(arrayOfRowIndices){
 if(AORI_length > arrayOfRowIndices.length){
 this.setCurrentRow(arrayOfRowIndices[arrayOfRowIndices.length - 1]);
  }
 AORI_length = arrayOfRowIndices.length;
 return true;
  }

Carlos

August 18,

Thanks a lot Carlos.
Adding 'return true;' to the onSelectedRowsChanged event did the trick for me.

obj.onSelectedRowsChanged = function(){ <my function>; return true;}

Thanks a lot.

Roy

August 20,

I spoke too soon.
The scrolling is fine now - there is no automatic scrolling to top of grid when you click on a checkbox.
BUT, now, my select-all-rows checkbox is not working. It doesn't select rows at all. Or maybe it does but the grid doesn't display any selected rows.

Here's what I'm doing. Hope it's not too long:

var select_all_header = new AW.UI.Checkbox;
select_all_header.setControlText("");
select_all_header.onControlValueChanged = function(){ 
                                                if(change_source_is_row) return false;
                                                toggleCheckBoxes(select_all_header.getControlValue());
                                                this.refreshClasses(); 
                                                return true; 
                                            } 

var obj = new AW.Grid.Extended;
                        
obj.setId("myGrid");
obj.setCellText(myData);

obj.setHeaderCount(1);
obj.setHeaderText(myHeaders);
obj.setColumnCount(myHeaders.length);
obj.setRowCount(myData.length);
obj.setVirtualMode(false);                
obj.setFixedLeft(0);                
obj.setSelectionMode("multi-row-marker"); 

obj.onSelectedRowsChanged = function(array){ mySelectionFunction(array); return true; };

obj.setHeaderTemplate(select_all_header, 0,0)

document.write(obj);

// My selection functions:

function toggleCheckBoxes(checked) 
{ 
  var rows_array = new Array();
  for(i=0;i < myData.length;i++) 
    rows_array[i] = i;
 
  if(checked)
  {
    obj.setSelectedRows(rows_array);
  }
  else
  {
    obj.setSelectedRows([]);
  }
} 

function mySelectionFunction(selected_array)
{
    change_source_is_row = true;
    if(selected_array.length == myData.length)
    {
        select_all_header.setControlValue(true);
    }
    else
    {
        select_all_header.setControlValue(false);
    }
    change_source_is_row  = false;
}

If I'm removing the 'return true;' from the onSelectedRowsChanged event, then the select all functions works great - but the scrolling jump to top...
I know it's probably not the best AW code you've seen and there are probably a lot of built-in shortcuts, but the documentation is hard to follow and this forum is my only hope.
Thanks a lot in advance.

Roy

August 21,

Ok, I sorta have a work around. Looks too crazy but it works.
There's gotta be a simpler way.
Anyway, here it is (only the code I modified):

var change_source_is_header = false;

obj.onSelectedRowsChanged = function(array){ mySelectionFunction(array); if(!change_source_is_header) return true; }; 

function toggleCheckBoxes(checked)  
{  
  var rows_array = new Array(); 
  for(i=0;i < myData.length;i++)  
    rows_array[i] = i; 
  
  change_source_is_header = true;
  if(checked) 
  { 
    obj.setSelectedRows(rows_array); 
  } 
  else 
  { 
    obj.setSelectedRows([]); 
  } 
  change_source_is_header = false;
}

The difference is that the 'return true;' in onSelectedRowsChanged will not be triggered unless change_source_is_header == false

Makes sense?
I keep feeling I'm misunderstanding something very basic.
Appreciate any comments.

Roy

August 21,

Roy, I think your example is suffering a cicle event distpatch (loop)
-when the value is changed by setControlValue then onSelectedRowsChanged is fired again.
The best solution I can suggest is override the event by an empty one, change the control Value and restore the original event. ( maybe someone could provide something more clean ).
HTH

var rows_array = new Array();  
for(i=0;i < myData.length;i++){ rows_array[i] = i; }

var ManualSelect = true;

select_all_header.onControlValueChanged = function(value){ 
ManualSelect = false;
if(value  ){ obj.setSelectedRows(rows_array); } 
if(!value ){ obj.setSelectedRows([]); }
}  

///////////////////////////////////////

obj.onSelectedRowsChanged = function(array){

if(ManualSelect ){      

//asign onValueChanged event to do nothing
select_all_header.onControlValueChanged = function(){ };

// change value ( without firing onValueChanged event )
array.length == myData.length ? select_all_header.setControlValue(true) : select_all_header.setControlValue(false);

// restore original onValueChanged event ( same as above )
select_all_header.onControlValueChanged = function(value){ 
ManualSelect = false;
if(value  ){ obj.setSelectedRows(rows_array); } 
if(!value ){ obj.setSelectedRows([]); }
}  

return true ;   // prevents auto scroll-top 
}

else{ }    //  toogle All - checkbox is clicked ( no 'return true')

ManualSelect = true;
}

Carlos

August 21,

just to clarify,
Inside onSelectedRowsChanged (when last unchecked row is checked ) a ControlValue is changed (toggleAll checbox).
That fires it's onControlValueChanged event, which contains a call to setSelectedRows. and...
obj.setSelectedRows -> always triggers -> obj.onSelectedRowsChanged (exactly the source event you start (loop) )
That needs some(unknow) kind of break point, or disable an event call, (i.e. by override/restore)

Carlos

August 21,

the best work-around that I discovered is to put the put the

obj.onSelectedRowsChanged events on top and bottom of the markAll function just like:

function markAll() {
obj.onSelectedRowsChanged = function(){return false;}
var selectedRows = new Array();

if (obj.getSelectedRows().length == table.getCount()) {
obj.setSelectedRows(selectedRows);
} else {
for (var i=0; i<table.getCount(); i++) {
selectedRows.push(i);
}
obj.setSelectedRows(selectedRows);
}
obj.onSelectedRowsChanged = function(){return true;}
}

Inside your table script you still need the line:
obj.onSelectedRowsChanged = function(){return true;}
just avoid scrolling to the top when marking one row.

Kellog

September 12,

This topic is archived.

multi-row-marker autoscrolls to top....

See also:

Search

New Data Grid

Version 2