Fixing issue where the grid widget would noticeably flash when the dataframe was swapped out via the df property. This should make the transition more smooth and address #186.

Author: Tim Shawver

js/src/qgrid.css

@@ -155,6 +155,14 @@
   height: 315px !important;
 }
 
+.q-grid-toolbar {
+  display: none;
+}
+
+.show-toolbar .q-grid-toolbar {
+  display: block;
+}
+
 .output_scroll .show-toolbar .q-grid {
   height: 284px !important;
 }

js/src/qgrid.widget.js

@@ -62,16 +62,21 @@ class QgridView extends widgets.DOMWidgetView {
     if (!this.$el.hasClass('q-grid-container')){
       this.$el.addClass('q-grid-container');
     }
-
-    if (this.model.get('show_toolbar')) {
-      this.initialize_toolbar();
-    }
-
+    this.initialize_toolbar();
     this.initialize_slick_grid();
   }
 
   initialize_toolbar() {
-    this.$el.addClass('show-toolbar');
+    if (!this.model.get('show_toolbar')){
+      this.$el.removeClass('show-toolbar');
+    } else {
+      this.$el.addClass('show-toolbar');
+    }
+
+    if (this.toolbar){
+      return;
+    }
+
     this.toolbar = $("<div class='q-grid-toolbar'>").appendTo(this.$el);
 
     let append_btn = (btn_info) => {
@@ -196,7 +201,10 @@ class QgridView extends widgets.DOMWidgetView {
    * type of data in the columns of the DataFrame provided by the user.
    */
   initialize_slick_grid() {
-    this.grid_elem = $("<div class='q-grid'>").appendTo(this.$el);
+
+    if (!this.grid_elem) {
+      this.grid_elem = $("<div class='q-grid'>").appendTo(this.$el);
+    }
 
     // create the table
     var df_json = JSON.parse(this.model.get('_df_json'));
@@ -414,6 +422,8 @@ class QgridView extends widgets.DOMWidgetView {
     this.slick_grid.setSelectionModel(new Slick.RowSelectionModel());
     this.slick_grid.setCellCssStyles("grouping", this.row_styles);
     this.slick_grid.render();
+    
+    this.update_size();
 
     var render_header_cell = (e, args) => {
       var cur_filter = this.filters[args.column.id];
@@ -664,7 +674,7 @@ class QgridView extends widgets.DOMWidgetView {
    */
   handle_msg(msg) {
     if (msg.type === 'draw_table') {
-      this.initialize_qgrid();
+      this.initialize_slick_grid();
     } else if (msg.type == 'show_error') {
       alert(msg.error_msg);
       if (msg.triggered_by == 'add_row' ||
@@ -773,6 +783,8 @@ class QgridView extends widgets.DOMWidgetView {
         this.slick_grid.scrollRowIntoView(msg.rows[0]);
       }
       this.ignore_selection_changed = false;
+    } else if (msg.type == 'change_show_toolbar') {
+      this.initialize_toolbar();
     } else if (msg.col_info) {
       var filter = this.filters[msg.col_info.name];
       filter.handle_msg(msg);

qgrid/grid.py

@@ -843,7 +843,7 @@ def _grid_options_changed(self):
     def _show_toolbar_changed(self):
         if not self._initialized:
             return
-        self._rebuild_widget()
+        self.send({'type': 'change_show_toolbar'})
 
     def _update_table(self,
                       update_columns=False,