Question

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

为了实现这一点，我添加了以下css

.k-grid table{
    display: inline;
}

问题是，当应用此样式时，它会完全混乱列标题和列对齐。有谁知道如何解决这个问题？

Answer 1

实际上这很简单。但是我浪费了很多时间因为我没有得到正确的来源。你只需要实现以下内容。

制作网格sortable: false

并使用此CSS

#gridId table {
    width: auto;
}

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

Answer 2

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

Answer 3

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

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

所以这个函数所做的就是根据当前窗口大小缩放网格，例如，如果你希望网格占用所有可用空间，即最大高度和宽度，如果你想要它，你可以调用resizeGrid(1)较小的说要占用屏幕尺寸的50％然后你会使用reszieGrid(0.5)如果没有使用任何值，那么该函数的默认值是可用宽度/高度的60％。

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

通过定位kendo css类，它使这个功能更容易重用。

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

如何设置kendo UI网格宽度

3 个答案: