Question

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

Answer 1

网格列调整大小在Kendo UI版本 2016.2.607 中的IE中不起作用。请使用其他版本或以下解决方法，它们会覆盖客户端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 && clientX + winScrollLeft < position + indicatorWidth) {
        that._createResizeHandle(th.closest("div"), th);
      } else if (that.resizeHandle) {
        that.resizeHandle.hide();
      } else {
        cursor(that.wrapper, "");
      }
    });
  }

Answer 2

稍微修改@ dimodi的答案，因为即如果身体缩放设置为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, "");
  }
});

}

Kendo UI Grid可调整大小无法在IE中运行，但在Chrome和Firefox中运行良好

2 个答案: