Provide a way to set styles for Header/Footer Cells and Rows in a Grid (

#8499)

Fixes #8422

client/src/main/java/com/vaadin/client/connectors/grid/GridConnector.java

@@ -30,7 +30,6 @@
 import com.google.gwt.dom.client.EventTarget;
 import com.google.gwt.dom.client.NativeEvent;
 import com.google.gwt.event.shared.HandlerRegistration;
-
 import com.vaadin.client.ComponentConnector;
 import com.vaadin.client.ConnectorHierarchyChangeEvent;
 import com.vaadin.client.ConnectorHierarchyChangeEvent.ConnectorHierarchyChangeHandler;
@@ -341,6 +340,7 @@ private void updateStaticRow(RowState rowState,
             updateStaticCellFromState(row.join(columns),
                     cellGroupEntry.getKey());
         }
+        row.setStyleName(rowState.styleName);
     }
 
     private void updateStaticCellFromState(Grid.StaticSection.StaticCell cell,

server/src/main/java/com/vaadin/ui/components/grid/FooterCell.java

@@ -87,4 +87,19 @@ public interface FooterCell extends Serializable {
      * @return column id for this cell
      */
     public String getColumnId();
+
+    /**
+     * Returns the custom style name for this cell.
+     *
+     * @return the style name or null if no style name has been set
+     */
+    public String getStyleName();
+
+    /**
+     * Sets a custom style name for this cell.
+     *
+     * @param styleName
+     *            the style name to set or null to not use any style name
+     */
+    public void setStyleName(String styleName);
 }

server/src/main/java/com/vaadin/ui/components/grid/FooterRow.java

@@ -115,4 +115,19 @@ public interface FooterRow extends Serializable {
      * @see Column#setId(String)
      */
     FooterCell join(String... columnIdsToMerge);
+
+    /**
+     * Returns the custom style name for this row.
+     *
+     * @return the style name or null if no style name has been set
+     */
+    public String getStyleName();
+
+    /**
+     * Sets a custom style name for this row.
+     *
+     * @param styleName
+     *            the style name to set or null to not use any style name
+     */
+    public void setStyleName(String styleName);
 }

server/src/main/java/com/vaadin/ui/components/grid/HeaderCell.java

@@ -87,4 +87,19 @@ public interface HeaderCell extends Serializable {
      * @return column id for this cell
      */
     public String getColumnId();
+
+    /**
+     * Returns the custom style name for this cell.
+     *
+     * @return the style name or null if no style name has been set
+     */
+    public String getStyleName();
+
+    /**
+     * Sets a custom style name for this cell.
+     *
+     * @param styleName
+     *            the style name to set or null to not use any style name
+     */
+    public void setStyleName(String styleName);
 }

server/src/main/java/com/vaadin/ui/components/grid/HeaderRow.java

@@ -115,4 +115,19 @@ public interface HeaderRow extends Serializable {
      * @see Column#setId(String)
      */
     HeaderCell join(String... columnIdsToMerge);
+
+    /**
+     * Returns the custom style name for this row.
+     *
+     * @return the style name or null if no style name has been set
+     */
+    public String getStyleName();
+
+    /**
+     * Sets a custom style name for this row.
+     *
+     * @param styleName
+     *            the style name to set or null to not use any style name
+     */
+    public void setStyleName(String styleName);
 }

server/src/main/java/com/vaadin/ui/components/grid/StaticSection.java

@@ -204,6 +204,25 @@ public CELL getCell(Column<?, ?> column) {
             return internalGetCell(section.getInternalIdForColumn(column));
         }
 
+        /**
+         * Returns the custom style name for this row.
+         *
+         * @return the style name or null if no style name has been set
+         */
+        public String getStyleName() {
+            return getRowState().styleName;
+        }
+
+        /**
+         * Sets a custom style name for this row.
+         *
+         * @param styleName
+         *            the style name to set or null to not use any style name
+         */
+        public void setStyleName(String styleName) {
+            getRowState().styleName = styleName;
+        }
+
         /**
          * Returns the cell in this section that corresponds to the given
          * internal column id.
@@ -515,6 +534,27 @@ public void setComponent(Component component) {
         public GridStaticCellType getCellType() {
             return cellState.type;
         }
+
+        /**
+         * Returns the custom style name for this cell.
+         *
+         * @return the style name or null if no style name has been set
+         */
+        public String getStyleName() {
+            return cellState.styleName;
+        }
+
+        /**
+         * Sets a custom style name for this cell.
+         *
+         * @param styleName
+         *            the style name to set or null to not use any style
+         *            name
+         */
+        public void setStyleName(String styleName) {
+            cellState.styleName = styleName;
+            row.section.markAsDirty();
+        }
 
         /**
          * Reads the declarative design from the given table cell element.

shared/src/main/java/com/vaadin/shared/ui/grid/SectionState.java

@@ -46,6 +46,11 @@ public static class RowState implements Serializable {
          * rows.
          */
         public boolean defaultHeader = false;
+
+        /**
+         * The style name for the row. Null if none.
+         */
+        public String styleName = null;
     }
 
     /** The state of a header or footer cell. */

uitest/src/main/java/com/vaadin/tests/components/grid/GridEditorUI.java

@@ -66,20 +66,23 @@ protected Collection<Person> createTestData(int size) {
     protected Grid<Person> createGrid() {
         Grid<Person> grid = new Grid<>();
 
-        grid.addColumn(Person::getEmail).setCaption("Email");
+        grid.addColumn(Person::getEmail).setCaption("Email").setId("email");
         Column<Person, String> fistNameColumn = grid
-                .addColumn(Person::getFirstName).setCaption("First Name");
+                .addColumn(Person::getFirstName).setCaption("First Name")
+                .setId("firstName");
         Column<Person, String> lastNameColumn = grid
-                .addColumn(Person::getLastName).setCaption("Last Name");
+                .addColumn(Person::getLastName).setCaption("Last Name")
+                .setId("lastName");
 
         Column<Person, String> phoneColumn = grid
-                .addColumn(Person::getPhoneNumber).setCaption("Phone Number");
+                .addColumn(Person::getPhoneNumber).setCaption("Phone Number")
+                .setId("phone");
         grid.addColumn(person -> person.getAddress().getStreetAddress())
-                .setCaption("Street Address");
+                .setCaption("Street Address").setId("street");
         grid.addColumn(person -> person.getAddress().getPostalCode(),
-                new NumberRenderer()).setCaption("Postal Code");
+                new NumberRenderer()).setCaption("Postal Code").setId("zip");
         grid.addColumn(person -> person.getAddress().getCity())
-                .setCaption("City");
+                .setCaption("City").setId("city");
 
         grid.getEditor().setEnabled(true);
 

uitest/src/main/java/com/vaadin/v7/tests/components/grid/GridHeaderStyleNames.java → uitest/src/main/java/com/vaadin/tests/components/grid/GridHeaderStyleNames.java

@@ -13,80 +13,76 @@
  * License for the specific language governing permissions and limitations under
  * the License.
  */
-package com.vaadin.v7.tests.components.grid;
+package com.vaadin.tests.components.grid;
 
 import com.vaadin.server.VaadinRequest;
-import com.vaadin.tests.components.AbstractTestUIWithLog;
-import com.vaadin.tests.components.beanitemcontainer.BeanItemContainerGenerator;
+import com.vaadin.tests.util.Person;
 import com.vaadin.ui.Button;
-import com.vaadin.ui.Button.ClickEvent;
-import com.vaadin.ui.Button.ClickListener;
-import com.vaadin.v7.ui.Grid;
-import com.vaadin.v7.ui.Grid.FooterCell;
-import com.vaadin.v7.ui.Grid.FooterRow;
-import com.vaadin.v7.ui.Grid.HeaderCell;
-import com.vaadin.v7.ui.Grid.HeaderRow;
-import com.vaadin.v7.ui.Grid.SelectionMode;
+import com.vaadin.ui.Grid;
+import com.vaadin.ui.Grid.SelectionMode;
+import com.vaadin.ui.components.grid.FooterCell;
+import com.vaadin.ui.components.grid.FooterRow;
+import com.vaadin.ui.components.grid.HeaderCell;
+import com.vaadin.ui.components.grid.HeaderRow;
 
-public class GridHeaderStyleNames extends AbstractTestUIWithLog {
+public class GridHeaderStyleNames extends GridEditorUI {
 
-    private HeaderCell ageHeaderCell;
+    private HeaderCell nameHeaderCell;
     private HeaderCell mergedCityCountryCell;
-    private FooterCell ageFooterCell;
+    private FooterCell nameFooterCell;
     private HeaderRow headerRow;
     private FooterRow footerRow;
 
+    private boolean stylesOn = true;
+
     @Override
     protected void setup(VaadinRequest request) {
-        Grid grid = new Grid();
+        Grid<Person> grid = createGrid();
+        grid.setItems(createTestData());
         grid.setSelectionMode(SelectionMode.MULTI);
-        grid.setContainerDataSource(
-                BeanItemContainerGenerator.createContainer(100));
 
-        ageHeaderCell = grid.getDefaultHeaderRow().getCell("age");
+        nameHeaderCell = grid.getDefaultHeaderRow().getCell("firstName");
         grid.getDefaultHeaderRow().setStyleName("foo");
         headerRow = grid.prependHeaderRow();
-        mergedCityCountryCell = headerRow.join("city", "country");
+        mergedCityCountryCell = headerRow.join("city", "street");
         mergedCityCountryCell.setText("Merged cell");
+
+        grid.setColumns("email", "firstName", "city", "street", "lastName",
+                "zip");
         addComponent(grid);
 
         footerRow = grid.appendFooterRow();
-        ageFooterCell = footerRow.getCell("age");
+        nameFooterCell = footerRow.getCell("firstName");
 
         getPage().getStyles().add(
-                ".age {background-image: linear-gradient(to bottom,green 2%, #efefef 98%) !important;}");
+                ".name {background-image: linear-gradient(to bottom,green 2%, #efefef 98%) !important;}");
         getPage().getStyles().add(
                 ".valo .v-grid-header .v-grid-cell.city-country {background-image: linear-gradient(to bottom,yellow 2%, #efefef 98%) !important;}");
         getPage().getStyles().add(
-                ".valo .v-grid-footer .v-grid-cell.age-footer {background-image: linear-gradient(to bottom,blue 2%, #efefef 98%) !important;}");
+                ".valo .v-grid-footer .v-grid-cell.name-footer {background-image: linear-gradient(to bottom,blue 2%, #efefef 98%) !important;}");
         getPage().getStyles().add(
                 ".valo .v-grid .v-grid-row.custom-row > * {background-image: linear-gradient(to bottom,purple 2%, #efefef 98%);}");
 
         setCellStyles(true);
         setRowStyles(true);
 
-        Button b = new Button("Toggle styles");
-        b.addClickListener(new ClickListener() {
-            private boolean stylesOn = true;
-
-            @Override
-            public void buttonClick(ClickEvent event) {
-                setCellStyles(!stylesOn);
-                setRowStyles(!stylesOn);
-                stylesOn = !stylesOn;
-            }
+        Button button = new Button("Toggle styles");
+        button.addClickListener(event -> {
+            setCellStyles(!stylesOn);
+            setRowStyles(!stylesOn);
+            stylesOn = !stylesOn;
         });
-        addComponent(b);
+        addComponent(button);
     }
 
     protected void setCellStyles(boolean set) {
         if (set) {
-            ageHeaderCell.setStyleName("age");
-            ageFooterCell.setStyleName("age-footer");
+            nameHeaderCell.setStyleName("name");
+            nameFooterCell.setStyleName("name-footer");
             mergedCityCountryCell.setStyleName("city-country");
         } else {
-            ageHeaderCell.setStyleName(null);
-            ageFooterCell.setStyleName(null);
+            nameHeaderCell.setStyleName(null);
+            nameFooterCell.setStyleName(null);
             mergedCityCountryCell.setStyleName(null);
         }
 

uitest/src/test/java/com/vaadin/v7/tests/components/grid/GridHeaderStyleNamesTest.java → uitest/src/test/java/com/vaadin/tests/components/grid/GridHeaderStyleNamesTest.java

@@ -13,16 +13,15 @@
  * License for the specific language governing permissions and limitations under
  * the License.
  */
-package com.vaadin.v7.tests.components.grid;
+package com.vaadin.tests.components.grid;
 
 import org.junit.Assert;
 import org.junit.Before;
 import org.junit.Test;
-import org.openqa.selenium.By;
 import org.openqa.selenium.WebElement;
 
-import com.vaadin.testbench.elements.GridElement;
 import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.GridElement;
 import com.vaadin.testbench.elements.GridElement.GridCellElement;
 import com.vaadin.testbench.parallel.TestCategory;
 import com.vaadin.tests.tb3.SingleBrowserTest;
@@ -42,20 +41,10 @@ private GridCellElement getMergedHeaderCell() {
         return grid.getHeaderCell(0, 3);
     }
 
-    private WebElement getMergedHeaderCellContent() {
-        return getMergedHeaderCell().findElement(
-                By.cssSelector("div.v-grid-column-header-content"));
-    }
-
-    private GridCellElement getAgeFooterCell() {
+    private GridCellElement getNameFooterCell() {
         return grid.getFooterCell(0, 2);
     }
 
-    private WebElement getAgeFooterCellContent() {
-        return getAgeFooterCell().findElement(
-                By.cssSelector("div.v-grid-column-footer-content"));
-    }
-
     @Test
     public void cellStyleNamesCanBeAddedAndRemoved() {
         ButtonElement toggleStyles = $(ButtonElement.class)
@@ -84,21 +73,21 @@ public void rowStyleNamesCanBeAddedAndRemoved() {
     private void assertStylesSet(boolean set) {
         if (set) {
             assertHasStyleName(
-                    "Footer cell should have the assigned 'age-footer' class name",
-                    getAgeFooterCell(), "age-footer");
+                    "Footer cell should have the assigned 'name-footer' class name",
+                    getNameFooterCell(), "name-footer");
             assertHasStyleName(
-                    "Header cell should have the assigned 'age' class name",
-                    getAgeHeaderCell(), "age");
+                    "Header cell should have the assigned 'name' class name",
+                    getAgeHeaderCell(), "name");
             assertHasStyleName(
                     "The merged header cell should have the assigned 'city-country' class name",
                     getMergedHeaderCell(), "city-country");
         } else {
             assertHasNotStyleName(
-                    "Footer cell should not have the removed 'age-footer' class name",
-                    getAgeFooterCell(), "age-footer");
+                    "Footer cell should not have the removed 'name-footer' class name",
+                    getNameFooterCell(), "name-footer");
             assertHasNotStyleName(
-                    "Header cell should not have the removed 'age' class name",
-                    getAgeHeaderCell(), "age");
+                    "Header cell should not have the removed 'name' class name",
+                    getAgeHeaderCell(), "name");
             assertHasNotStyleName(
                     "Ther merged header cell should not have the removed 'city-country' class name",
                     getMergedHeaderCell(), "city-country");
@@ -108,7 +97,7 @@ private void assertStylesSet(boolean set) {
                 getAgeHeaderCell(), "v-grid-cell");
         assertHasStyleName(
                 "The default v-grid-cell style name should not be removed from the footer cell",
-                getAgeFooterCell(), "v-grid-cell");
+                getNameFooterCell(), "v-grid-cell");
         assertHasStyleName(
                 "The default v-grid-cell style name should not be removed from the merged header cell",
                 getMergedHeaderCell(), "v-grid-cell");
@@ -144,11 +133,6 @@ private WebElement getAgeHeaderCell() {
         return grid.getHeaderCell(1, 2);
     }
 
-    private WebElement getAgeHeaderCellContent() {
-        return getAgeHeaderCell().findElement(
-                By.cssSelector("div.v-grid-column-header-content"));
-    }
-
     private WebElement getFooterRow() {
         return grid.getFooterRow(0);
     }