Kendo ui 剑道网格：当你调整（减少）任何列的大小时，在最后留下空白

我有一个网格，当我调整（减少）任何列的大小时，网格的末尾会显示一个空白。我已经检查了剑道官方的样本，似乎在一些样本中显示的行为是在他们的样本中

我尝试设置标题、单元格内容等的宽度。。但它仍然显示一些UI问题，我有多个网格，我需要一个通用的修复程序

如果这不是一个问题和行为，那么请有人看看这个问题，并解释如何解决它

我已经添加了一个普通的屏幕截图和调整大小的屏幕截图

正常

调整大小后的

为了测试它，我添加了一个JSFIDLE.，

http://jsfiddle.net/49bhz2sk/

html

脚本

$（“#fleetInfoGridDisplayDummy”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
页面大小：20
},
可导航：是的，
是的，
可排序：是的，
可重定额：对，
可调整大小：正确，
可滚动：{virtual:true}，
columnMenu:true，//需要隐藏和显示列。
可分页：{
刷新：是的，
页面大小：对，
按钮数：5
},
栏目：[{
模板：“”+
“#：联系人姓名#”，
字段：“联系人姓名”，
标题：“联系人姓名”，
宽度：240
}, {
字段：“ContactTitle”，
标题：“联系人标题”
}, {
字段：“公司名称”，
标题：“公司名称”
}, {
字段：“国家”，
宽度：150
}]
});

根据各种剑道来源，这是和的混合。剑道确实提供了这个问题，因为我怀疑它不一定与剑道有关，而是一个HTML/表格特性

k网格{
宽度：700px；
}
函数getMasterColumnsWidth（待定）{
var结果=0；
tbl.children（“colgroup”）.find（“col”）.not（“：last”）.each（函数（idx，元素）{
结果+=parseInt（$（元素）.outerWidth（）| | 0,10）；
});
返回结果；
}
函数adjustLastColumn（）{
var grid=$（“#grid1”）.data（“kendoGrid”）；
var contentDiv=grid.wrapper.children（“.k-grid-content”）；
var masterHeaderTable=grid.thead.parent（）；
var masterBodyTable=contentDiv.children（“表”）；
var gridDivWidth=contentDiv.width（）-kendo.support.scrollbar（）；
masterHeaderTable.宽度（“”）；
masterBodyTable.宽度（“”）；
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）；
如果（增量>0）{
delta=数学绝对值（delta）；
最后一个头部组件。宽度（增量）；
lastDataColElement.宽度（增量）；
}否则{
lastHeaderColElement.宽度（0）；
lastDataColElement.width（0）；
}
contentDiv.scrollLeft（contentDiv.scrollLeft（）-1）；
contentDiv.scrollLeft（contentDiv.scrollLeft（）+1）；
}
$（“#grid1”）。肯多格里德({
数据源：{
类型：“odata”，
运输：{
阅读：“https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
页面大小：6，
对,，
服务器排序：true
},
身高：430，
pageable:对，
可调整大小：正确，
columnResize:adjustLastColumn，
数据绑定：adjustLastColumn，
栏目：[{
字段：“名字”，
标题：“名字”，
宽度：“100px”
}, {
字段：“姓氏”，
标题：“姓氏”，
宽度：“150像素”
}, {
字段：“国家”，
宽度：“100px”
}, {
字段：“城市”，
宽度：“100px”
}, {
字段：“标题”，
宽度：“200px”
}, {
模板：“”
}]
});

根据各种剑道来源，这是和的混合。剑道确实提供了这个问题，因为我怀疑它不一定与剑道有关，而是一个HTML/表格特性

k网格{
宽度：700px；
}
函数getMasterColumnsWidth（待定）{
var结果=0；
tbl.children（“colgroup”）.find（“col”）.not（“：last”）.each（函数（idx，元素）{
结果+=parseInt（$（元素）.outerWidth（）| | 0,10）；
});
返回结果；
}
函数adjustLastColumn（）{
var grid=$（“#grid1”）.data（“kendoGrid”）；
var contentDiv=grid.wrapper.children（“.k-grid-content”）；
var masterHeaderTable=grid.thead.parent（）；
var masterBodyTable=contentDiv.children（“表”）；
var gridDivWidth=contentDiv.width（）-kendo.support.scrollbar（）；
masterHeaderTable.宽度（“”）；
masterBodyTable.宽度（“”）；
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）；
如果（增量>
<div class="panel panel-body">
    <div id="fleetInfoGridDisplayDummy" class="" data-bind="autoHeightContainer:true"></div>
</div>

 $("#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
                }]
            });

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("");
                    }

                  },