2016-01-27 43 views
0

我設置了第一列固定寬度爲'31px',但是當所有列都通過調整容器大小來調整大小並調整大小時,第一列與get增加。在feddle示例中,如果您使Title and Age列的大小與Screen shot一樣小,然後調整大小,您將看到第一列寬度增加。Kendo UI固定寬度列大小在調整柵格大小時得到增加

var ds = new kendo.data.DataSource({ 
data: createRandomData(50), 
schema: { 
    model: { 
     fields: { 
      FirstName: { type: "string" }, 
      LastName: { type: "string" }, 
      City: { type: "string" }, 
      Title: { type: "string" }, 
      Age: { type: "number" } 
     } 
    } 
}, 
pageSize: 10 
}); 

$(document).ready(function() { 
$("#grid").kendoGrid({ 
    dataSource: ds, 
    height: 450, 
    sortable: true, 
    reorderable: true, 
    resizable: true, 
    pageable: true, 
    columnResize : saveWidthOfColumns, 
    rowTemplate: kendo.template($("#template").html()), 
    columns: JSON.parse('[{"title":"FirstName","width":"31px"},{"title":"Title","width":null},{"title":"Age","width":null}]') 
}); 
}); 
function saveWidthOfColumns(event) { 
if (event.column.field == null) { 
    $("#grid colgroup").each(function() { 
     $(this).find(":nth-child(1)").css("width", "31px"); 
    }); 
} 
} 
$(window).resize(function() { 
resizeGrid(); 
}); 
function resizeGrid() { 
var newWidth = $('body').innerWidth() - 20; 
var oldWidth = $(".k-grid-content table").width() - 20; 
if(oldWidth < newWidth) 
{ 
    $(".k-grid-content").css("padding-right", "18px"); 
    $(".k-grid-content table").css("width",newWidth + "px"); 
    $(".k-grid-header-wrap table").css("width",newWidth + "px"); 
} 

}

Fiddle example

+0

請注意,問題**必須包含**問題**(例如,最後)。通過這種方式,您可以磨礪您的問題,並更輕鬆地回答問題。 –

+0

爲什麼不使用.resize小部件方法而不是手動執行?以下是窗口更改時調整大小的示例http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/resize-grid-when-the-window-is-resized – tede24

回答

0

我不知道我完全理解你的要求,但嘗試從您的div容器和電網去除寬度風格將填補並適當調整。

+0

我想使第一列的寬度始終爲'31px',但問題是,當我標題和年齡列設置爲最小寬度,然後調整容器大小,第一列寬度獲取更改我希望它與之前調整大小相同。 [小提琴](http://jsfiddle.net/HAMEh/329/) –

相關問題