Настройка высоты сетки Kendo UI 100% обертки

Ответ 1

Согласно одной из групп технической поддержки Kendo; Димо Димов. Вы должны установить высоту одного контейнера, и все внутри должно быть установлено на 100% (включая сетку). Затем вы вручную настроите высоту содержимого на готовом документе и измените размер окна.

См. здесь для своего примера:

http://jsfiddle.net/dimodi/SDFsz/

Смотрите здесь, чтобы ваша обновилась с помощью функции js, чтобы установить высоту обертки на высоту окна.

http://jsbin.com/yumexugo/1/edit

По существу содержимое изменяется с помощью:

function resizeGrid() {
    var gridElement = $("#grid"),
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function(){
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}

а размер обертки - (вам может потребоваться изменить это в соответствии с вашим расположением):

function resizeWrapper() {
    $("#outerWrapper").height($('#body').innerHeight());
}

Готовый документ и изменение размера окна обоих вызовов:

$(window).resize(function() {
    resizeWrapper();
    resizeGrid();
});

Соответствующий css:

#grid {
  height: 100%;
}

#outerWrapper{
  overflow: hidden;
}

Ответ 2

Вы должны сделать две вещи.

• Отрегулируйте высоту $('.k-grid table') при изменении размера страницы
• Отрегулируйте высоту $('.k-grid table') на методе dataBound сетки

Пожалуйста, смотрите его в jsBin http://jsbin.com/xorawuya/1/edit

  $(window).resize(function() {
    var viewportHeight = $(window).height();
    $('#outerWrapper').height(viewportHeight);
    $('.k-grid table').height(viewportHeight-150);
  });

А также здесь

  dataBound: function(e) {
    $('.k-grid table').height($(window).height()-150);
  },

150, который я вычитаю, является высотой окна минус высота заголовка/нижнего колонтитула сетки. Это может быть разным в вашем макете веб-сайта. Отрегулируйте его соответствующим образом.

Ответ 3

Я создал другое решение, которое работает, когда ваш html отличается в том смысле, что его не только сетка одна, но и другой контент над ней. Здесь JSFiddle.

HTML

<div class="container">
  <div class="test">
    hey there
  </div>
  <div id="grid"></div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container{
  height:100%;
}
.test{
  height:100px;
}
html {
  overflow: hidden;
}

JS

function resizeGrid() {
  var gridElement = $("#grid");
  var dataArea = gridElement.find(".k-grid-content");
  var newHeight = gridElement.parent().innerHeight() - 2 -calcHeightsOfParentChildren(gridElement);
  var diff = gridElement.innerHeight() - dataArea.innerHeight();
  if((newHeight-diff)>0){
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff);
  }
}

function calcHeightsOfParentChildren(element){
    var children = $(element).parent().children();
  var height = 0;
  $.each(children, function( index, value ) {
    if($(value).attr("id") != $(element).attr("id")){
        height = height + $(value).height();
    }
    });
    return height;
}

$(window).resize(function() {
  resizeGrid();
});

$("#grid").kendoGrid({
  dataSource: {
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
      model: {
        fields: {
          OrderID: {
            type: "number"
          },
          ShipName: {
            type: "string"
          },
          ShipCity: {
            type: "string"
          }
        }
      }
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
  },
  height: 250,
  filterable: true,
  sortable: true,
  pageable: true,
  dataBound: resizeGrid,
  columns: [{
      field: "OrderID",
      filterable: false
    },
    "ShipName",
    "ShipCity"
  ]
});

Ключом моего решения является измененная функция resizeGrid. Что произойдет без этой модификации, если пользователь прокручивает достаточно далеко вверх, нижний пейджер теряется! Проверяя, чтобы newHeight-diff больше 0, он предотвращает эту ошибку.

Второе значение calcHeightsOfParentChildren при передаче элемента рассматриваемой сетки будет вычислять все другие высоты, кроме его собственных, чтобы помочь рассчитать правильную разницу, чтобы разместить управление пейджером и сетью так, чтобы оно действительно занимало 100% и сохраняло 100% -ное соотношение.

Ответ 4

Если вы не против людей с IE8, это путь:

/* FULL HEIGHT GRID */
.k-grid.k-grid-stretch-height-full {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-full .k-grid-content {
    height: calc(100% - 103px) !important;
}
.k-grid.k-grid-stretch-height-nogroup {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-nogroup .k-grid-content {
    height: calc(100% - 72px) !important;
}
.k-grid.k-grid-stretch-height-simple {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-simple .k-grid-content {
    height: calc(100% - 37px) !important;
}

Просто добавьте любой из классов k-grid-stretch-height-AXZ вдоль стороны k-grid и играйте с номерами пикселей.