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
On Aug 18, 6:12 am, Sander Smith <[email protected]> wrote:
> 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?
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
