如何设置剑道 UI 网格宽度

Question

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

为了让它工作，我添加了以下 css

.k-grid table{
    display: inline;
}

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

Answer 1

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

制作网格sortable: false

并使用这个 CSS

#gridId table {
    width: auto;
}

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

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 类，它使这个函数更容易重用。

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