Блог

Главная - Вопросы по программированию - Kendo UI Сетка с возможностью изменения размера не работает в IE, но отлично работает в Chrome и Firefox

Kendo UI Сетка с возможностью изменения размера не работает в IE, но отлично работает в Chrome и Firefox

#kendo-ui #kendo-grid #kendo-asp.net-mvc

#kendo-ui #kendo-grid #kendo-asp.net-mvc

Вопрос:

  @(Html.Kendo().Grid<Tracker.TMS.BE.uspTMSSelectAreas_Result>()
    .Name("AvailableAreas")
    .Groupable()
    .Sortable()
    .Filterable()
    .Scrollable()
    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
    .Columns(columns =>
    {
        columns.Bound(e => e.CustomerVehicleID).Visible(false);
        columns.Bound(e => e.AreaID).Visible(false);
        columns.Bound(e => e.AreaType).Title("Area Type").Width(100);
        columns.Bound(e => e.SubType).Title("Sub Type").Width(100);
        columns.Bound(e => e.AreaName).Title("Area Name");
    })
    .Resizable(resize => resize.Columns(true))
    .Pageable(page => page.Enabled(false)).NoRecords("No records found.")
    .Events(e => e.Change("availableAreaSelected"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetAvailableAreas", "Vehicle").Data("filterAreas"))))

Ответ №1:

Изменение размера столбцов сетки не работает в IE в версии Kendo UI 2016.2.607. Пожалуйста, используйте другую версию или следующий обходной путь, который переопределяет прототип объекта Grid на стороне клиента:

http://dojo.telerik.com/AzaKu/2

   kendo.ui.Grid.fn._positionColumnResizeHandle = function() {

    function cursor(context, value) {
      $('th, th .k-grid-filter, th .k-link', context)
        .add(document.body)
        .css('cursor', value);
    }

    var NS = ".kendoGrid",
        that = this,
        isRtl = kendo.support.isRtl(that.element),
        indicatorWidth = that.options.columnResizeHandleWidth,
        lockedHead = that.lockedHeader ? that.lockedHeader.find("thead:first") : $();

    that.thead.add(lockedHead).on("mousemove"   NS, "th", function(e) {
      var th = $(this);

      if (th.hasClass("k-group-cell") || th.hasClass("k-hierarchy-cell")) {
        return;
      }

      function getPageZoomStyle() {
        var docZoom = parseFloat($(document.documentElement).css("zoom"));
        if (isNaN(docZoom)) {
          docZoom = 1;
        }
        var bodyZoom = parseFloat($(document.body).css("zoom"));
        if (isNaN(bodyZoom)) {
          bodyZoom = 1;
        }
        return docZoom * bodyZoom;
      }

      var clientX = e.clientX / getPageZoomStyle(),
          winScrollLeft = $(window).scrollLeft(),
          position = th.offset().left   (!isRtl ? this.offsetWidth : 0);

      if (clientX   winScrollLeft > position - indicatorWidth amp;amp; clientX   winScrollLeft < position   indicatorWidth) {
        that._createResizeHandle(th.closest("div"), th);
      } else if (that.resizeHandle) {
        that.resizeHandle.hide();
      } else {
        cursor(that.wrapper, "");
      }
    });
  }

Комментарии:

1. Хорошо, я рад, что помог. Пожалуйста, отметьте мой ответ как ответ, чтобы дело было «закрыто».

Ответ №2:

Небольшое изменение ответа @dimodi, поскольку в ie, если масштаб тела установлен на 1, то 

 $(document.body).css("zoom")

вернет 100%, а не 1, это помешает пользователям изменять размер

 kendo.ui.Grid.fn._positionColumnResizeHandle = function() {

function cursor(context, value) {
  $('th, th .k-grid-filter, th .k-link', context)
    .add(document.body)
    .css('cursor', value);
}

var NS = ".kendoGrid",
    that = this,
    isRtl = kendo.support.isRtl(that.element),
    indicatorWidth = that.options.columnResizeHandleWidth,
    lockedHead = that.lockedHeader ? that.lockedHeader.find("thead:first") : $();

that.thead.add(lockedHead).on("mousemove"   NS, "th", function(e) {
  var th = $(this);

  if (th.hasClass("k-group-cell") || th.hasClass("k-hierarchy-cell")) {
    return;
  }

  function getPageZoomStyle() {
    var docZoom = parseFloat($(document.documentElement).css("zoom"));
    if (isNaN(docZoom)) {
      docZoom = 1;
    }
    var bodyZoom = parseFloat($(document.body).css("zoom"));
    if (isNaN(bodyZoom)) {
      bodyZoom = 1;
    }
    else if (bodyZoom>=100 amp;amp; (browser.msie || browser.edge)) { 
       bodyZoom = bodyZoom/100;   
     }
    return docZoom * bodyZoom;
  }

  var clientX = e.clientX / getPageZoomStyle(),
      winScrollLeft = $(window).scrollLeft(),
      position = th.offset().left   (!isRtl ? this.offsetWidth : 0);

  if (clientX   winScrollLeft > position - indicatorWidth amp;amp; clientX   winScrollLeft < position   indicatorWidth) {
    that._createResizeHandle(th.closest("div"), th);
  } else if (that.resizeHandle) {
    that.resizeHandle.hide();
  } else {
    cursor(that.wrapper, "");
  }
});

}