problem with scrollY

problem with scrollY

astherasastheras Posts: 2Questions: 1Answers: 0

first of all sorry for my english. When i add scrollY option, i getting this

i tried use columns.adjust().draw(); to fix column width, but i got an error

jquery.dataTables.js:5213 Uncaught TypeError: Cannot read property 'style' of undefined
at _fnScrollDraw (jquery.dataTables.js:5213)
at _fnAdjustColumnSizing (jquery.dataTables.js:2160)
at _Api.<anonymous> (jquery.dataTables.js:8648)
at _Api.iterator (jquery.dataTables.js:7029)
at _Api.<anonymous> (jquery.dataTables.js:8647)
at Function.adjust (jquery.dataTables.js:7197)
at HTMLDocument.<anonymous> (Reference?ReferenceID=19:466)
at fire (jquery.js:3183)
at Object.fireWith [as resolveWith] (jquery.js:3313)
at Function.ready (jquery.js:3532)

html table code

      <table id="showfields" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead style="background: #222; color:#eee">
          <tr>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @foreach (var item in Consts.References[ReferenceID - 1].TableColumns) {
            <tr>
              @if (@item.Title != ""){
                <td>@item.Title</td>
              } else {
                <td>@item.FieldName</td>
              }
              <td>True</td>
            </tr>
          }
        </tbody>
      </table>

script

$(document).ready(
    function () {
      var data = {
        ReferenceID: '@ViewData["ReferenceID"]',
      };

    var grid = $('#showfields').DataTable({
      "language": {
        "url": "/Ukrainian.json"
      },
      "columns": [
        { "data": "Title", "title": "Назва" },
        {
          "data": "Enabled", "title": "Показати",
          render: function (data, type, row) {
            if (type === 'display') {
              var checked = "";
              if (data == "True") {
                checked = 'checked';
              }
              return '<input type="checkbox" class="editor-active" '+checked+'>';
            }
            return data;
          },
        }
      ],
//      rowId: 'ID',
      scrollY: "200px",
     // "scrollCollapse": true,
      paging: false,
      select: true
//      dom: 'Bfrtip',
//      buttons: []
    });

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,471Questions: 1Answers: 10,467 Site admin
    Answer ✓

    You would need to use grid.columns.adjust() when your modal is made visible. If you are getting an error doing that, can you link to a page showing the issue please.

    Allan

  • astherasastheras Posts: 2Questions: 1Answers: 0

    thanks it works
    added

          $('.ShowFields').on('shown.bs.modal', function () {
            grid.columns.adjust();
          })   
    
This discussion has been closed.