Jak zmienić rozmiar slickgrid div o rozmiar tabeli

Mam nadzieję, że niektórzy użytkownicy zaznajomią się ze slickGrid widząc, jak również StackOverflow go używa :)

Mam kod HTML zawierający mój slickGrid w następujący sposób:

  <div style="position:relative; overflow:visible; width:600px; margin:25px 0 0 0;">

    <div id="myGrid" style="width:100%;overflow:visible; min-height:100px; max-height:300px;"></div>
  </div>

  <div class="options-panel">
    <h2>Demonstrates:</h2>
    <ul>
      <li>adding basic keyboard navigation and editing</li>
      <li>custom editors and validators</li>
      <li>auto-edit settings</li>
    </ul>

    <h2>Options:</h2>

    <button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button>
    &nbsp;
    <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button>
  </div>


<script  type="text/javascript" language="javascript" src="./js/slickGrid/lib/firebugx.js"></script>
<!-- <script src="js/slickGrid/lib/jquery-1.7.min.js"></script>-->
<script src="js/slickGrid/lib/jquery-ui-1.8.16.custom.min.js.php"></script>
<script src="js/slickGrid/lib/jquery.event.drag-2.0.min.js"></script>

<script src="js/slickGrid/slick.core.js"></script>
<script src="js/slickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="js/slickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="js/slickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="js/slickGrid/slick.formatters.js"></script>
<script src="js/slickGrid/slick.editors.js"></script>
<script src="js/slickGrid/slick.grid.js"></script>

<script>
  function requiredFieldValidator(value) {
    if (value == null || value == undefined || !value.length) {
      return {valid: false, msg: "This is a required field"};
    } else {
      return {valid: true, msg: null};
    }
  }

  var grid;
  var data = [];
  var columns = [
    {id: "id", name: "Id", field: "id", width: 20, minWidth: 20, maxWidth:20, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, sortable: true},
    {id: "date", name: "Date", field: "date", minWidth: 80, editor: Slick.Editors.Date, sortable: true},
    {id: "venue", name: "Venue", field: "venue", width: 120, minWidth:120, editor: Slick.Editors.Text, sortable: true},
    {id: "event", name: "Event", field: "event", width: 180, minWidth:180, editor: Slick.Editors.Text, sortable: true},
    {id: "description", name: "Additional", field: "desc", width: 180, minWidth:180, editor: Slick.Editors.Text, sortable: true},
    {id: "visible", name: "Visible", field: "visible", width: 20, minWidth: 20, cssClass: "cell-effort-driven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, sortable: true}
  ];
  var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: true,
    multiColumnSort: true
  };

  $(function () {
    for (var i = 0; i < 6; i++) {
      var d = (data[i] = {});

      d["id"] = i;
      d["date"] = "06/31/2012";
      d["venue"] = "Sample Venue";
      d["event"] = "Sample Event";
      d["desc"] = "$45 Door";
      d["visible"] = (i % 5 == 0);
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);

    grid.setSelectionModel(new Slick.CellSelectionModel());

    grid.onAddNewRow.subscribe(function (e, args) {
      var item = args.item;
      grid.invalidateRow(data.length);
      data.push(item);
      grid.updateRowCount();
      grid.render();
    });

    grid.onSort.subscribe(function (e, args) {
      var cols = args.sortCols;

      data.sort(function (dataRow1, dataRow2) {
        for (var i = 0, l = cols.length; i < l; i++) {
          var field = cols[i].sortCol.field;
          var sign = cols[i].sortAsc ? 1 : -1;
          var value1 = dataRow1[field], value2 = dataRow2[field];
          var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
          if (result != 0) {
            return result;
          }
        }
        return 0;
      });
      grid.invalidate();
      grid.render();
    });
  })
</script>

<hr />EOP

Chcę, aby mój slickGrid zbierał dane, a następnie automatycznie zmieniał rozmiar div, aby objąć zaktualizowaną siatkę. Obecnie wydaje się, że rozmiar div musi być ustawiony statycznie? Jeśli nie ustawię wartości wysokości div"myGrid", ustawia tylko jego wysokość na 0. Chcę, aby div rozwijał się wraz z rozmiarem ładowanej siatki.

Dokumentacja slickgrid na gitHub (https://github.com/mleibman/SlickGrid/wiki/_pages ) jest bardzo ograniczony (uczciwie autor to potwierdza). Również miałem problemy z tym tematem w Google.

Wiem, że jest to specyficzne oprogramowanie, ale naprawdę mamy nadzieję, że mamy jakieś śliczne Grid Guru, ponieważ to narzędzie wydaje się niesamowite!

questionAnswers(3)

yourAnswerToTheQuestion