通过单击按钮事件全局更改字体大小时，Kendo Grid不会保留设置的高度

Question

我有一个项目，我需要在click事件上全局设置字体大小，这是我做的

$('body').css("font-size", "20px");

字体大小按预期更改，但是现在我的网格无法保持其高度。高度已经设定好了，但是我不明白为什么他们不保留它。更改字体大小后，可以执行此操作以重置其高度

let gridCustomer = $('#gridCustomer').data('kendoGrid');
let gridJob = $('#gridJob').data('kendoGrid');

if (gridCustomer) {
    gridCustomer.setOptions({
        height: 384
    });
}

if (gridJob) {
    gridJob.setOptions({
        height: 290
    });
}

但是我不必这样做，因为已经设置好了，在此示例中，您可以看到网格如何超出其高度

$(document).ready(function() {
  LoadGrid1();
  LoadGrid2();
});
$('#btn').on('click', function() {
  $('body').css("font-size", "20px");

});

$('#btn2').on('click', function() {
  let gridCustomer = $('#gridCustomer').data('kendoGrid');
  let gridJob = $('#gridJob').data('kendoGrid');

  if (gridCustomer) {
    gridCustomer.setOptions({
      height: 200
    });
  }

  if (gridJob) {
    gridJob.setOptions({
      height: 200
    });
  }
});

var data1 = [{
    "FirstName": "John",
    "LastName": "A"
  },
  {
    "FirstName": "Joe",
    "LastName": "B"
  },
  {
    "FirstName": "Jack",
    "LastName": "C"
  }
];

function LoadGrid1(data) {
  $("#gridCustomer").kendoGrid({
    height: 200,
    scrollable: true,
    sortable: true,
    pageable: true,
    selectable: "row",
    columns: [{
      field: "FirstName",
      title: "First"
    }, {
      field: "LastName",
      title: "Last"
    }],
    dataSource: {
      data: data1,
      pageSize: 14,
      schema: {
        model: {
          fields: {
            FirstName: {
              type: "string"
            },
            LastName: {
              type: "string"
            }
          }
        }
      }
    },
    change: function(e) {
      var customerGrid = $("#gridCustomer").data("kendoGrid");
      var dataRow = customerGrid.dataItem(customerGrid.select());

    }
  });
}

function LoadGrid2() {
  $("#gridJob").kendoGrid({
    height: 200,
    scrollable: true,
    sortable: true,
    pageable: true,
    selectable: "row",
    columns: [{
        field: "JobName",
        title: "Job Name"
      },
      {
        field: "PONumber",
        title: "PO Number",
        filterable: false
      }
    ],
    toolbar: [{
        name: "open",
        template: "<button type='button' id='btnOpenOrder' data-toggle='tooltip' data-placement='bottom' title='Open order' disabled class='btn btn-warning btn-xs'><span class='glyphicon glyphicon-folder-open'></span> Open</button>&nbsp;"
      },
      {
        name: "search",
        template: "<button type='button' data-toggle='tooltip' data-placement='bottom' title='Find Order' disabled class='btn btn-warning btn-xs' onclick='FindJob()'><span class='glyphicon glyphicon-search'></span> Job Search</button>&nbsp;"
      },
      {
        name: "import",
        template: "<button type='button' data-toggle='tooltip' data-placement='bottom' title='Import Order' disabled class='btn btn-warning btn-xs' onclick='ImportJob()'><span class='glyphicon glyphicon-cloud-upload'></span> Import</button>&nbsp;"
      },
      {
        name: "export",
        template: "<button type='button' id='btnExportOrderDetailsFromGrid' data-toggle='tooltip' data-placement='bottom' title='Export Order' disabled class='btn btn-warning btn-xs'><span class='glyphicon glyphicon-cloud-download'></span> Export Selected</button>&nbsp;"
      },
      {
        text: "delete",
        template: "<button type='button' data-toggle='tooltip' data-placement='bottom' title='Delete Order' disabled class='btn btn-warning btn-xs' onclick='DeleteSelectedJobs()'><span class='glyphicon glyphicon-remove'></span> Delete Selected</button>"
      },
      {
        text: "chkDelete",
        template: "&nbsp;&nbsp;&nbsp;<input type='checkbox' data-toggle='tooltip' data-placement='bottom' title='Permanently Delete Order' disabled data-toggle='tooltip' data-placement='top' title='Permanently delete after Export or Delete'> Permanently Delete</input>"
      }
    ],
    dataSource: {
      data: data2,
      pageSize: 7,
      schema: {
        model: {
          fields: {
            JobName: {
              type: "string"
            },
            PONumber: {
              type: "string"
            }
          }
        }
      }

    },
    change: function(e) {


    },
    //noRecords: {
    //    template: "No Customer Selected."
    //}
  });
}

var data2 = [{
    "JobName": "Job 1",
    "PONumber": "PO1"
  },
  {
    "JobName": "Job 2",
    "PONumber": "PO2"
  },
  {
    "JobName": "Job 3",
    "PONumber": "PO3"
  },
];

.k-grid td {
  padding: 0 0 0 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div id="gridCustomer" style="margin-bottom: 5px"></div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div id="gridJob" style="margin-bottom: 5px"></div>
    </div>
  </div>
  <br>
  <button id="btn">Change Font-size</button>
  <button id="btn2">Reset Grid Height</button>
</div>