Using a CellTable with individual Cell selection

[Sander Smith]

I need to create a table of records where each row in the table is
selectable. I'm using a CellTable which works very nice, and allows me
to select and act on rows.

However, there's a cosmetic side-effect that I don't like. When
anything in the table is clicked on, it seems like the cell that was
clicked on is being selected. It does this by highlighting the text in
the cell and putting a frame around that cell.

How do I retain the functionality of this widget, but avoid this
cosmetic behavior?

[Jeff Larsen]

you can always override the CSS and get change 

.dataGridSelectedRowCell {

  border: selectionBorderWidth solid #628cd5;

}

to 

.dataGridSelectedRowCell {

}

[Sander Smith]

Is this the only way to do this, cover it up in the CSS file? I can't
suppress this behavior somehow?

I'm also not sure what you're suggesting, it looks like something got
cut off. Which CSS file needs updating, I'm simply using the stock CSS
file which has no reference to dataGridSelectedRowCell

> }- Hide quoted text -
>
> - Show quoted text -

[Jeff Larsen]

The behavior is from the CSS. It isn't a hack to remove it. 

You just need to change it so you're not using the stock css anymore. If you're using cellTable

you'd want to edit one or both of the following 2 css properties.

.cellTableSelectedRowCell {

  border: selectionBorderWidth solid #628cd5;

}

/**

 * The keyboard selected cell is visible over selection.

 */

.cellTableKeyboardSelectedCell {

  border: selectionBorderWidth solid #d7dde8;

} 

For example code on how to override the default celltable/datagrid css, take a look at this class. The mechanism is the same between both. 

http://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/showcase/src/com/google/gwt/sample/showcase/client/content/cell/CwCustomDataGrid.java?spec=svn10550&r=10550

[Sudhakar Abraham]

In celltable css change the properties of cellTableOddRowCell:hover
and cellTableEventRowCell:hover set the border properties.

Here is a sample code.

package com.college.client;
import java.util.Arrays;
import java.util.List;
import com.college.client.StudentListEditor.TableResources;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.view.client.ListDataProvider;
public class CellTableExample implements EntryPoint
{
interface TableResources extends CellTable.Resources
{
@Source(value = { CellTable.Style.DEFAULT_CSS,
"CellTableStyle.css" })
CellTable.Style cellTableStyle();
}
@Override
public void onModuleLoad()
{
CellTable<Contact> table = new CellTable<Contact>(15,
GWT.<TableResources> create(TableResources.class));
TextColumn<Contact> nameColumn = new TextColumn<Contact>() {
@Override
public String getValue(Contact contact) {
return contact.name;
}
};
TextColumn<Contact> addressColumn = new TextColumn<Contact>() {
@Override
public String getValue(Contact contact) {
return contact.address;
}
};
table.addColumn(nameColumn, "Name");
table.addColumn(addressColumn, "Address");
ListDataProvider<Contact> dataProvider = new
ListDataProvider<Contact>();
dataProvider.addDataDisplay(table);
List<Contact> list = dataProvider.getList();
for (Contact contact : CONTACTS) {
list.add(contact);
}
RootPanel.get().add(table);
}
private static class Contact {
private final String address;
private final String name;

public Contact(String name, String address) {
this.name = name;
this.address = address;
}
}
private static List<Contact> CONTACTS = Arrays.asList(new
Contact("John",
"123 Fourth Road"), new Contact("Mary", "222 Lancer Lane"), new
Contact(
"Zander", "94 Road Street"));
}

CellTableStyle.css

.cellTableCell {
height: 25px;
cursor: pointer;
padding: 2px 25px;
}
.cellTableHeader {
height: 25px;
padding: 3px 25px;
text-align: left;
color: #4b4a4a;
text-shadow: #ddf 1px 1px 0;
overflow: hidden;
background: #BAC2CD;
}
.cellTableEvenRow {
background: #fffaf0;
}
.cellTableEvenRow:hover{
color: black;
}
.cellTableEvenRowCell {
border: 2px solid #fffaf0;
}
.cellTableOddRowCell {
border: 0px solid red;
}
.cellTableEvenRowCell{
border: 0px solid blue;
}
.cellTableOddRowCell:hover {
border: 2px solid red;
}
.cellTableEvenRowCell:hover{
border: 2px solid blue;
}


S. Abraham
www.DataStoreGwt.com

[jsano]

Thanks Sudhakar!
This code works perfectly.

On Aug 19, 5:12 pm, Sudhakar Abraham <s.abra...@datastoregwt.com>
wrote: