Separate function to apply styling

Signed-off-by: Itay Dafna <[email protected]>

Author: ibdafna

js/cellrenderer.ts

@@ -245,8 +245,6 @@ export class TextRendererModel extends CellRendererModel {
   }
 
   get_attrs(): ICellRendererAttribute[] {
-    const gridStyle = this.get('grid_style');
-    console.log(gridStyle);
     return [
       { name: 'font', phosphorName: 'font', defaultValue: '12px sans-serif' },
       { name: 'text_wrap', phosphorName: 'wrapText', defaultValue: false },
@@ -264,7 +262,7 @@ export class TextRendererModel extends CellRendererModel {
       {
         name: 'background_color',
         phosphorName: 'backgroundColor',
-        defaultValue: undefined,
+        defaultValue: Theme.getBackgroundColor(),
       },
       {
         name: 'vertical_alignment',

js/datagrid.ts

@@ -357,6 +357,7 @@ export class DataGridView extends DOMWidgetView {
     this.grid.isLightTheme = this._isLightTheme;
     this.grid.dataModel = this.model.data_model;
     this.grid.selectionModel = this.model.selectionModel;
+    this.grid.backboneModel = this.model;
 
     this.grid.cellClicked.connect(
       (sender: FeatherGrid, event: FeatherGrid.ICellClickedEvent) => {
@@ -438,7 +439,7 @@ export class DataGridView extends DOMWidgetView {
     return this.updateRenderers().then(() => {
       this.updateGridStyle();
       this.updateGridRenderers();
-
+      this.grid.setGridStyle();
       this.pWidget.addWidget(this.grid);
     });
   }
@@ -518,6 +519,7 @@ export class DataGridView extends DOMWidgetView {
 
   public updateGridStyle() {
     this.grid.updateGridStyle();
+    this.grid.setGridStyle();
   }
 
   set isLightTheme(value: boolean) {
@@ -575,6 +577,7 @@ export class DataGridView extends DOMWidgetView {
   grid: FeatherGrid;
   pWidget: JupyterPhosphorPanelWidget;
   model: DataGridModel;
+  backboneModel: DataGridModel;
 
   // keep undefined since widget initializes before constructor
   private _isLightTheme: boolean;

js/feathergrid.ts

@@ -20,6 +20,8 @@ import { Transform } from './core/transform';
 import { Theme } from './utils';
 import { KeyHandler } from './keyhandler';
 
+import { DataGridModel as BackBoneModel } from './datagrid';
+
 import '@lumino/default-theme/style/datagrid.css';
 import '../style/feathergrid.css';
 
@@ -518,39 +520,16 @@ export class FeatherGrid extends Widget {
     this.updateGridStyle();
     this._updateGridRenderers();
     this._updateColumnWidths();
+    this.setGridStyle();
   }
 
-  public updateGridStyle() {
-    this._updateHeaderRenderer();
-
-    if (!this._defaultRendererSet) {
-      this._defaultRenderer = new TextRenderer({
-        font: '12px sans-serif',
-        textColor: Theme.getFontColor(),
-        backgroundColor: Theme.getBackgroundColor(),
-        horizontalAlignment: 'left',
-        verticalAlignment: 'center',
-      });
+  public setGridStyle() {
+    // Resetting grid style if theme changes.
+    if (this.backboneModel) {
+      this.grid.style = this.backboneModel.get('grid_style');
     }
 
-    this._rowHeaderRenderer = new TextRenderer({
-      textColor: Theme.getFontColor(1),
-      backgroundColor: Theme.getBackgroundColor(2),
-      horizontalAlignment: 'center',
-      verticalAlignment: 'center',
-    });
-
-    this._columnHeaderRenderer = new HeaderRenderer({
-      textOptions: {
-        textColor: Theme.getFontColor(1),
-        backgroundColor: Theme.getBackgroundColor(2),
-        horizontalAlignment: 'left',
-        verticalAlignment: 'center',
-      },
-      isLightTheme: this._isLightTheme,
-      grid: this.grid,
-    });
-
+    // Setting up theme.
     const scrollShadow = {
       size: 4,
       color1: Theme.getBorderColor(1, 1.0),
@@ -592,6 +571,40 @@ export class FeatherGrid extends Widget {
     };
   }
 
+  public updateGridStyle() {
+    this._updateHeaderRenderer();
+
+    if (!this._defaultRendererSet) {
+      this._defaultRenderer = new TextRenderer({
+        font: '12px sans-serif',
+        textColor: Theme.getFontColor(),
+        backgroundColor: Theme.getBackgroundColor(),
+        horizontalAlignment: 'left',
+        verticalAlignment: 'center',
+      });
+    }
+
+    this._rowHeaderRenderer = new TextRenderer({
+      textColor: Theme.getFontColor(1),
+      backgroundColor: Theme.getBackgroundColor(2),
+      horizontalAlignment: 'center',
+      verticalAlignment: 'center',
+    });
+
+    this._columnHeaderRenderer = new HeaderRenderer({
+      textOptions: {
+        textColor: Theme.getFontColor(1),
+        backgroundColor: Theme.getBackgroundColor(2),
+        horizontalAlignment: 'left',
+        verticalAlignment: 'center',
+      },
+      isLightTheme: this._isLightTheme,
+      grid: this.grid,
+    });
+
+    this.setGridStyle();
+  }
+
   copyToClipboard(): void {
     const grid = <DataGrid>(<unknown>this);
     // Fetch the data model.
@@ -1014,6 +1027,7 @@ export class FeatherGrid extends Widget {
   private _cellClicked = new Signal<this, FeatherGrid.ICellClickedEvent>(this);
   private _columnsResized = new Signal<this, void>(this);
   private _isLightTheme = true;
+  backboneModel: BackBoneModel;
 }
 
 /**