title: Slickgrid is rendered until the width of some of its columns is adjusted
body: <p>I am trying to show the contents of a table in a slickgrid which is displayed in a dialog. It is working incorrectly: When I open the dialog, the grid only shows the headers of the grid and the pagination controls:</p>
  
  <p><a href="https://i.stack.imgur.com/lv5s6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lv5s6.png" alt="enter image description here"></a></p>
  
  <p>I can change the page and the grid is not rendered. I can only make it renderize by adjusting the width of any column, I do not know what event triggers the column adjustment and I would like to invoke it manually:</p>
  
  <p><a href="https://i.stack.imgur.com/QoIoT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QoIoT.png" alt="enter image description here"></a></p>
  
  <p>The div that i use as a grid container and which I open in a dialog:</p>
  
  <pre><code>&lt;div id="dlgBitacoraCnfGlobal" style="display:none;"&gt;
      &lt;div id="divContenedor" style="width: 100%; height: 95%; overflow: auto;"&gt;
      &lt;div style="margin-top: 10px; clear: both;"&gt;
          &lt;div id="divBotones" class="toolBarBox" style="padding-top: 5px; float: left;"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;s:message code="general.formatoFecha" /&gt;:&lt;/td&gt;
                      &lt;td&gt;
                          &lt;label for="fechaInicial"&gt;&lt;s:message code="general.fechaInicial.desde" /&gt;&amp;nbsp;&lt;/label&gt;
                          &lt;input type="text" id="fechaInicial" size="10" maxlength="10"/&gt;&amp;nbsp;&amp;nbsp;
                          &lt;label for="fechaFinal"&gt;&lt;s:message code="general.fechaFinal.a"/&gt;&amp;nbsp;&lt;/label&gt;
                          &lt;input type="text" id="fechaFinal" size="10" maxlength="10"/&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;span id="toolbar" class="ui-widget-header ui-corner-all"&gt;
              &lt;aclutil:secBtn pantalla="${nombrePantalla}" domId="btnRefrescar" seguro="false" mensaje="${refres}" /&gt;
          &lt;/span&gt;
          &lt;div id="divPagerBitacora" style="margin: 5px; clear: both;"&gt;&lt;/div&gt;
          &lt;div id="divGridBitacora" style="width: 95%; height: 420px; margin: 10px; margin-top: 5px; "&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>javascript functions with which I create and control the grid:</p>
  
  <pre><code>function initComponents() {
      $('#bitacora', $ctxt).button({
          icons : {
              primary : "ui-icon-clock"
          }
      }).click(function() {
          buscarBitacora();
      });
  
      initBitacora($ctxt);
  }
  
  function consultarBitacoraTab() {
      cargaInicial();
  }
  
  function buscarBitacora() {
      var $dialogoBitacora = $("#dlgBitacoraCnfGlobal", $ctxt);
      $dialogoBitacora.dialog({
          autoOpen : false,
          modal : true,
          height : 700,
          width : 1100,
          title : "Bitacora de cambios",
          open : function(event, ui) {
              consultarBitacoraTab();
          },
          close : function(event, ui) {
          },
          buttons : [ {
              text : "Aceptar",
              click : function() {
                  var $this = $(this);
                  $this.dialog("close");
              }
          } ]
      });
      $dialogoBitacora.dialog("open");
  }
  
  function initBitacora($ctxt) {
      $context = $ctxt;
      self = this;
      _fechaInicial = $("#fechaInicial", $ctxt);
      $(_fechaInicial).attr("id", $(_fechaInicial).attr("id") + "_" + _id);
      _fechaFinal = $("#fechaFinal", $ctxt);
      $(_fechaFinal).attr("id", $(_fechaFinal).attr("id") + "_" + _id);
      crearDatePicker();
      var preparar = function () {
          $(":button", $context).button();
          $divGridBitacora = $('#divGridBitacora', $ctxt);
          $divPagerBitacora= $('#divPagerBitacora', $ctxt);
          $btnRefrescar = $("#btnRefrescar", $context);
          $btnRefrescar.click(cargaInicial);
      };
  
      return $.when(preparar()).done(function () {
          crearGridListado();
          cargaInicial();
      });
  
      function crearGridListado() {
          var columnas = [];
          var opciones = {
              editable: false,
              enableCellNavigation: true,
              asyncEditorLoading: true,
              autoEdit: false,
              enableAddRow: false,
              forceFitColumns: false,
              enableRowReordering: true,
              rowHeight: 25,
              gridName: "bitacora_configuracion_global",
              enableSearchStringMap: true,
              sortable: true
          };
          fnDescribirGrid({
              url: "/describir/nombrePojo/BitacoraConfiguracionVO/",
              columnas: columnas,
              columnasOmitir: [""],
              callback: function () {
                  rgListado = new RemoteGridFactory({
                      divGrid: $divGridBitacora,
                      divPager: $divPagerBitacora,
                      options: opciones,
                      columns: columnas,
                      pagingOptions: {
                          pageSize: tamanoPagina,
                          pagenum: 0
                      },
                      onRunFilter: cargaInicial,
                      onSort: cargaInicial,
                      listarPag:cargarBitacora,
                      onDblClick: function (e, row, cell) {
                          var item = dataViewBitacora.rows[row];
                          creaMensaje({mensaje: item.valor, cssClass: "cell-click",titulo: "Bitacora de cambios", contexto: $ctxt});
                      },
                      onSelectedRowsChanged: function () {
                          var rows = gridBitacora.getSelectedRows();
                          itemSeleccionado = dataViewBitacora.rows[rows[0]];
                      }
                  });
  
                  gridBitacora = rgListado.getGrid();
                  dataViewBitacora = rgListado.getDataView();
                  mapaDeBusqueda = rgListado.getSearchMap();
                  paginadorListado = rgListado.getPager();
              }
          });
      }
  }
  
  
  function cargaInicial() {
      var datosConsultados = [];
      datosPagina0 = consultarBitacora(paginaInicial, function(resultado) {
          datosConsultados = resultado.pageItems[1];
          totalNumeroListado = resultado.rowsCount;
      });
      $.when(datosPagina0).done(function() {
          $('#divBotones', $context).unblock();
          if (datosConsultados.length === 0) {
              dataViewBitacora.setItems([], paginaInicial);
              return;
          }
          dataViewBitacora.setItems(datosConsultados, totalNumeroListado);
          gridBitacora.render();
      });
  }
  
  function cargarBitacora(pagina) {
      paginadorListado.lock();
      paginadorListado.updateButtons();
      consultarBitacora(pagina, function(resultado) {
          dataViewBitacora.addItems([], pagina);
          dataViewBitacora.addItems(resultado.pageItems[1], pagina);
          paginadorListado.unlock();
          paginadorListado.updateButtons();
          $('#divBotones', $context).unblock();
      });
  }
  
  function consultarBitacora(pagina, callback) {
      $('#divBotones', $context).block();
      if (!pagina)
          pagina = paginaInicial;
      var parametrosBusqueda = {
          '@class' : JacksonHelper.HASHMAP,
          filtros : mapaDeBusqueda,
          orden : rgListado.getOrderMap(),
          first : pagina * tamanoPagina,
          page : pagina,
          max : tamanoPagina,
          cadenaBuscada : _cadenaBuscada
      };
      return $.postJSON('/bitacoraHistory/search?fInicial='
              + _fechaInicial.datepicker("getDate").getTime() + "&amp;fFinal="
              + _fechaFinal.datepicker("getDate").getTime(), parametrosBusqueda,
              callback);
  }
  </code></pre>
  
  <p>My main objective is to understand why the grid is generated until I adjust the width of some of its columns, if I can apply a "patch" like trigger the same event that is triggered when I do the column adjustment but manually correct this error. I am attentive to any suggestion to understand and solve the problem</p>