After playing with different options and hours of searching I've decided to use a little less elegant solution, but I've achieved what I was looking for. If someone faces similar problem, here is what I did:
- When the DOM loads (
$(document).ready(...)
or$(...)
in jQuery), I call code to remove rightpadding-right
of.k-grid-header
and removeoverflow-y
of.k-grid-content
.
The code I've used:
// jQuery code
$(".k-grid-header").css("padding-right","0");
$(".k-grid-content").css("overflow-y","initial");
// JS (without jQuery) equivalent
var gridHeaders = document.querySelectorAll(".k-grid-header");
for (var i = 0, element; element = gridHeaders[i++];)
element.paddingRight = "0";
var gridContent = document.querySelectorAll(".k-grid-content");
for (var i = 0, element; element = gridContent [i++];)
element.overflowY = "initial";