如何设置kendoUI网格宽度

Question

我遇到了 Kendo 网格宽度的问题。我想让网格伸展以适应网格的内容。我正在处理的这个网格是动态创建的，因此有时它可能只有 2 列，有时它最多可能有 5 列。我不希望网格展开并占用整个页面以仅显示两列。

为了让这个工作正常，我添加了以下 css

.k-grid table{
    display: inline;
}

问题是当应用这种样式时，它完全弄乱了列 header 和列对齐方式。有谁知道如何解决这个问题？

Answer 1

与其尝试应用一些 css，不如使用一些 jQuery 来执行此任务。我在身高方面做了类似的事情。所以也许这样的东西对你有用（我已经修改它来做高度和宽度）。

function resizeGrid(size) {

    if (size === null || size === undefined) {
        size = 0.6;
    }

    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    windowHeight = windowHeight * size;
    windowWidth = windowWidth * size; 
    $(".k-grid-content").height(windowHeight)
    $(".k-grid).width(windowWidth);
}

所以这个函数所做的就是根据当前 window 大小缩放网格，例如，如果您希望网格占据所有可用的 space 即最大高度和宽度，您将调用 resizeGrid(1) 如果你想让它更小，比如占据屏幕尺寸的 50% 那么你可以使用 reszieGrid(0.5) 如果没有使用任何值那么该函数只是默认为可用的 60% width/height。

因此您可以在初始化网格后调用它，然后将网格缩放到合适的大小。

通过以 kendo css 类为目标，它使该函数更易于重用。

如果您需要更多信息，请告诉我。

Answer 2

其实这个很简单。但是我浪费了很多时间，因为我没有得到正确的来源。您只需要执行以下操作即可。

制作网格sortable: false

并使用这个 CSS

#gridId table {
    width: auto;
}

但是这样你就失去了滚动功能。但是您可以将 kendo 网格包裹在另一个容器中并实现您自己的滚动。

Answer 3

var grid = $("#kendoGridName");
grid.width(400);

如何设置kendoUI网格宽度

How to set kendo UI grid width

kendo-ui

kendo-grid