:: Forum >>

Highlight row and edit cell in grid

I have seen demos of editing cells in a grid and other demos of highlighting a row on click. Is there a way to combine these features?

I have a grid with some columns editable, some not. I would like the row to highlight when single clicked and the cell to become editable, if it is an editable column.
LanceH
Tuesday, April 11, 2006
If you want to edit some cells those cells should be selectable, so you should use "single-cell" selection mode. But you can also use onCurrentRowChanged event to add the highlight color to the current row.
Alex (ActiveWidgets)
Tuesday, April 11, 2006
Alex,
Thank you - I wrote this code and it is working fine - highlighting the row on mouse click, and restoring the row's original color.
However, a problem arises when I try selecting some rows, then filter the grid using setRowIndices. The row's then do not alternate properly. I suspect my code below to restore the row's color is not correct. Is there a way to restore the original color, by somehow removing the effect of setStyle("background", "red")?

(stylesheet)
.aw-alternate-even { background: #cccccc; }
.aw-alternate-odd { background: #e9e9e9; }

obj.onCurrentRowChanged = function(index){
if (lastRow != null) {
// set last row's color
obj.getRowTemplate(lastRow).setStyle("background", (lastRow % 2)? "#e9e9e9" : "#cccccc");
}
// save current row number
lastRow = index;
obj.getRowTemplate(index).setStyle("background","red");
};
LanceH
Wednesday, April 12, 2006
Actually the problem is even simpler. It doesn't require filtering - all I have to do is sort by another column, and the background colors get messed up. If I never click on a row, the colors are OK.
LanceH
Wednesday, April 12, 2006
Probably you should just remove the background style instead of assigning another one -

obj.getRowTemplate(lastRow).setStyle("background", "");

Alex (ActiveWidgets)
Thursday, April 13, 2006
That would be nice, but when I try this, I lose the alternating background colors specified in the style sheet
LanceH
Thursday, April 13, 2006
oops..

Then we can only use setClass() method. Actually the grid already has a row template css class linked to row state property. And the row state calculation method already includes 'current' row state. So we just need to trigger row state recalculation on current row change event (bug ?).

<style>
    .aw-alternate-even {background: #eee}
    .aw-rows-current {background: #9cf}
</style>
<script>

    var obj = new AW.UI.Grid;
    obj.setCellData("cell");
    obj.setHeaderText("header");

    obj.setColumnCount(10);
    obj.setRowCount(100);

    var previousRow;
    obj.onCurrentRowChanging = function(newRow){
        previousRow = this.getCurrentRow();
    }

    obj.onCurrentRowChanged = function(newRow){
        this.calculateRowState(previousRow);
        this.calculateRowState(newRow);
    }

    document.write(obj);
</script>
Alex (ActiveWidgets)
Monday, April 17, 2006
This works for me. Thanks.
LanceH
Monday, April 17, 2006
I have a grid with some columns editable. I would like the row to highlight after searching particuler data into grid whaen data in found in a row , that row will be highlighted .(aw.ui.grid)
Mayank Shrivastava
Thursday, August 17, 2006

This topic is archived.


Back to support forum

Forum search