Настройка горизонтальной прокрутки KendoGrid

Question

Я хочу добавить значки со стрелками влево и вправо влево и вправо от заголовка сетки кендо для всех моих страниц. При нажатии на заголовок стрелки вправо сетка будет прокручивать содержимое вправо на несколько пикселей, а влево будет наоборот.

Эти 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>',
});