Kendo Grid : Blank space in the end when you resize(reduce) any column - kendo-ui

Question

I have a grid and when i resize (reduce) any column, there is a white space shows up in the end of the grid. I have checked with the Kendo official samples and it seems like in some samples the shown behavior is in their samples.
I tried setting up width for header, cell content etc.. but its still shows some UI issues and i have multiple grids and i need a generic fix.
If its not an issue and a behavior then somebody please have a look at this and explain how to fix it.
I have added a normal screen shot and resized screenshot.
normal
after resize
For testing it out, i have added a jsfiddle.,
http://jsfiddle.net/49bhz2sk/
html
<div class="panel panel-body">
<div id="fleetInfoGridDisplayDummy" class="" data-bind="autoHeightContainer:true"></div>
</div>
script
$("#fleetInfoGridDisplayDummy").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
navigatable: true,
selectable: true,
sortable: true,
reorderable: true,
resizable: true,
scrollable: { virtual: true },
columnMenu: true, // Needed to hide and show columns.
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});

Answer 1

I have posted this in telerik forum and got a reply from the admin, here is how they suggested to resolve the issue. Posted here so that someone else can benefit from this.
Answer proposed by 'Drew B.' also works, i have seen that too in another post. The the code i posted is less cumbersome with minimal coding.
columnResize: function (e) {
// what is thead and tbody: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields
var grid = e.sender,
gridHeaderTable = grid.thead.parent(),
gridBodyTable = grid.tbody.parent();
// what is wrapper: https://docs.telerik.com/kendo-ui/api/javascript/ui/widget/fields/wrapper
// what is scrollbar(): https://docs.telerik.com/kendo-ui/api/javascript/kendo/fields/support
if (gridBodyTable.width() < grid.wrapper.width() - kendo.support.scrollbar()) {
// remove the width style from the last VISIBLE column's col element
gridHeaderTable.find("> colgroup > col").last().width("");
gridBodyTable.find("> colgroup > col").last().width("");
// remove the width property from the last VISIBLE column's object
// https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/fields/columns
grid.columns[grid.columns.length - 1].width = "";
// remove the Grid tables' pixel width
gridHeaderTable.width("");
gridBodyTable.width("");
}
},

Answer 2

According to various kendo sources, this is a mixture of observed normal behavior (2013), and unexpected behavior (2017). Kendo does provide a workaround for this issue, as I suspect it isn't necessarily kendo related but more an HTML/Table feature.
<style>
.k-grid {
width: 700px;
}
</style>
<div id="grid1"></div>
<script>
function getMasterColumnsWidth(tbl) {
var result = 0;
tbl.children("colgroup").find("col").not(":last").each(function (idx, element) {
result += parseInt($(element).outerWidth() || 0, 10);
});
return result;
}
function adjustLastColumn() {
var grid = $("#grid1").data("kendoGrid");
var contentDiv = grid.wrapper.children(".k-grid-content");
var masterHeaderTable = grid.thead.parent();
var masterBodyTable = contentDiv.children("table");
var gridDivWidth = contentDiv.width() - kendo.support.scrollbar();
masterHeaderTable.width("");
masterBodyTable.width("");
var headerWidth = getMasterColumnsWidth(masterHeaderTable),
lastHeaderColElement = grid.thead.parent().find("col").last(),
lastDataColElement = grid.tbody.parent().children("colgroup").find("col").last(),
delta = parseInt(gridDivWidth, 10) - parseInt(headerWidth, 10);
if (delta > 0) {
delta = Math.abs(delta);
lastHeaderColElement.width(delta);
lastDataColElement.width(delta);
} else {
lastHeaderColElement.width(0);
lastDataColElement.width(0);
}
contentDiv.scrollLeft(contentDiv.scrollLeft() - 1);
contentDiv.scrollLeft(contentDiv.scrollLeft() + 1);
}
$("#grid1").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 430,
pageable: true,
resizable: true,
columnResize: adjustLastColumn,
dataBound: adjustLastColumn,
columns: [{
field: "FirstName",
title: "First Name",
width: "100px"
}, {
field: "LastName",
title: "Last Name",
width: "150px"
}, {
field: "Country",
width: "100px"
}, {
field: "City",
width: "100px"
}, {
field: "Title",
width: "200px"
}, {
template: " "
}]
});
</script>