Question

我想为我所有页面的kendo网格标题的左右添加左右箭头图标。单击右箭头标题时，网格将向右滚动内容一些像素，向左滚动则相反。

这2列必须始终在页面中可见。我不能在这里使用锁定的列（左和右，一起）。我正在尝试添加仅包含图标的2个空白列，并使用CSS和jQuery来执行所需的功能，但没有成功。

function getScrollLeft(gridId) {
  event.preventDefault();

  $("#" + gridId).find('.k-grid-content').animate({
    scrollLeft: "-=200px"
  }, "slow");

  $("#" + gridId).find('.k-grid-header').animate({
    scrollLeft: "-=200px"
  }, "slow");

  var left = parseInt($("#" + gridId).find('.k-grid-header th.k-header[data-index="0"]').css("left"));
  $("#" + gridId).find('.k-grid-header th.k-header[data-index="0"]').css({
    "left": left - 200 + "px"
  });
}

function getScrollRight(gridId) {
  event.preventDefault();

  $("#" + gridId).find('.k-grid-content').animate({
    scrollLeft: "+=200px"
  }, "slow");

  $("#" + gridId).find('.k-grid-header').animate({
    scrollLeft: "+=200px"
  }, "slow");

  var right = parseInt($("#" + gridId).find('.k-grid-header th.k-header:last-child').css("right"));
  $("#" + gridId).find('.k-grid-header th.k-header:last-child').css({
    "right": right - 200 + "px"
  });
}

// Kendo grid columns:
//left scroll header
columns.push({
  headerTemplate: '<span class="kendo-header-index-opening-icon"></span>',
  title: "",
  width: 50,
});

//right scroll header
columns.push({
  title: "",
  width: 180,
  headerTemplate: '<span class="kendo-header-index-closing-icon"></span>',
});

自定义KendoGrid水平滚动

0 个答案: