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

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>

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);

}

Well, seems to be more easy than that, ( simplest always better),
just try:
obj.onSelectedRowsChanged = function(){return true;}

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;

  }

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.

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.

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, 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;

}

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)

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.

Forum search