代码之家 › 专栏 › 技术社区 › Majase

剑道UI网格可调整大小:在IE中不工作,但在Chrome和Firefox中工作良好

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

Majase · 技术社区 · 9 年前

 @(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"))))

2 回复 | 直到 9 年前

dimodi neronovs 9 年前

在剑道UI版本的IE中,网格列大小调整不起作用 2016.2.607 。请使用另一个版本或以下替代客户端网格对象原型的解决方法:

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 && clientX + winScrollLeft < position + indicatorWidth) {
        that._createResizeHandle(th.closest("div"), th);
      } else if (that.resizeHandle) {
        that.resizeHandle.hide();
      } else {
        cursor(that.wrapper, "");
      }
    });
  }

praveen 9 年前

对@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 && (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 && clientX + winScrollLeft < position + indicatorWidth) {
    that._createResizeHandle(th.closest("div"), th);
  } else if (that.resizeHandle) {
    that.resizeHandle.hide();
  } else {
    cursor(that.wrapper, "");
  }
});

}