Show checkbox on the selector column

I think this should conform to most UI design standard (MS).

Currently the checkbox displays on the first column which looks weird.

What exactly does
obj.setSelectionMode("multi-row-marker");
perform?

Can we hand code the same thing but add the checkbox before the selector text?

BTW, how to get the indexes of the rows selected, besides setting a onSelectedRowsChanged callback? (I only need to find out the selected row when the user clicks a "Del" button that is not part of the grid.

THanks

Hi,

I found the answer to my second question

obj.getSelectedRows();


But I still haven't figure out how to place the checkboxes in or before the selector column.

I saw this example but it is using 1.0 API

http://www.activewidgets.com/examples/grid/v2basic.htm

How to do the following using the 2.0 API?

var row = new Active.Templates.Row;
row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");
obj.setTemplate("row", row);

Basically I want the current row to highlight on hover.

Also, user can click on any column in the row to select it.

If I use
obj.setSelectionMode("multi-row-marker");

then the user must click on the first column to select the row which is again kind of weird behavior.

THanks!

You can use 'normal' multi-row selection mode and put checkbox (CheckedItem) template into the row selector -

<style>

.aw-mouseover-row {
    background: #ccc;
}

</style>
<script>

var obj = new AW.UI.Grid;
obj.setCellData(function(col, row){return col + "." + row});
obj.setHeaderText("header");

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

obj.setSelectionMode("multi-row");

obj.setSelectorVisible(true);
obj.setSelectorWidth(30);
obj.setSelectorTemplate(new AW.Templates.CheckedItem);

obj.onRowSelectedChanged = function(value, i){
    this.getSelectorTemplate(i).refresh();
}

document.write(obj);

</script>

Thank you alex.

The feature set of the grid control is amazingly large!
Documentation definitely needs to catch up :-)

Using your example, one thing that is not right (again I'm being a picky UI geek) is that if the user check item #1 #2 #3 using the checkbox, and then single click row #4 in the one of the cell, #1,2,3 will get unchecked.

From the UI's perspective, the presence of the checkboxes indicates that the user should be able to multi-select items without using the ctrl key, whether clicking on the checkbox directly or clicking on the row data.

So what I do now is to disable the selection by clicking the row. This at least makes the behavior consistent.

I have no idea what parameters obj.setSelectionMode() accepts so I just pass in “none” and it seems to work.

obj.setSelectorVisible(true);
obj.setSelectorWidth(45);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
obj.setSelectionMode("none");
obj.setSelectorTemplate(new AW.Templates.CheckedItem);


I have one serious bug to submit that is related to the multiple row selection with the checkbox.

In my example I have 100 rows with checkboxes. If I randomly click some of the checkboxes, sometime (1 out of 2 time) the grid will automatically scroll to another page.

This can be reproduced easily. If not, please let me know and I can give you an example.

Thanks for the awesome grid control. I should be able to convince my boss to purchase it once I have the prototype up and running!

is there a way to unselect the check box on the selector through javascript program

i use
obj.setSelectorVisible(true)
obj.setSelectorWidth(30);
obj.setSelectorTemplate(new AW.Templates.CheckedItem);
to get the checkbox on selector

after i click on some icon depending upon conditon i want to uncheck the checkbox
how to attain this?

for (var t=0; t<numfac.length; t++)
{try{grid.getSelectorTemplate(t).setStateProperty("selected", false);}catch(e){}}

or

for (var t=0; t<numfac.length; t++)
{try{grid.getSelectorTemplate(t).setStateProperty("selected", true);}catch(e){}}