如何设置kendo UI网格的宽度

Question

我遇到了Kendo Grid宽度的问题。我想让网格根据其内容自动拉伸。我正在处理的网格是动态创建的，因此有时可能只有2列，而有时最多可能有5列。我不希望网格因仅显示两列而扩展并占用整个页面。

为了使此功能正常工作，我添加了以下CSS：

.k-grid table{
    display: inline;
}

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

- Nilesh

Answer 1

实际上这很简单。但是由于我没有获得正确的源代码，所以浪费了很多时间。您只需要实现以下内容。

将网格设置为sortable: false

并使用此CSS

#gridId table {
    width: auto;
}

但是这样你会失去滚动功能。不过你可以将你的Kendo网格包裹在另一个容器中，并实现自己的滚动。

- Nilesh

---

我几乎可以确定你想说的是 scrollable: false。 - Jacob Stamm

Answer 2

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

- Graham Laight

Answer 3

不要试图应用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);
}

这个函数的作用是根据当前窗口大小来缩放网格。例如，如果你想让网格占用所有可用空间，即最大高度和宽度，你可以调用resizeGrid(1)；如果你想要更小一些，比如只占屏幕尺寸的50%，那么你可以使用reszieGrid(0.5)。如果没有使用任何值，则函数默认为可用宽度/高度的60%。

在初始化网格后，你可以调用此函数来将网格缩放到适当的大小。

通过针对kendo css类进行定位，使得这个函数更易于重用。

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

- David Shorthose

---

感谢您的解决方案，@David。它确实很好用。但是我的问题是，我不想明确提及网格的宽度。我只想根据列数和内容跨越网格。这就是我指定显示属性的原因。在 Angular 和纯 HTML 表中轻松完成此操作，但当 Kendo 网格出现时，问题就开始了。 - Nilesh

肯德基支持 Angular 作为一方公民。抱歉，我对 Angular 不是很了解。您可以修改此代码以在数据绑定事件中触发，然后根据列数进行调整。 - David Shorthose

同意，但是提及列的宽度并没有意义，因为这是一个动态网格，我不知道从服务器获取的内容长度是多少。我唯一看到的问题在于我应用的CSS样式被应用到了标题和内容表中。当th中的文本比td中的文本更长时，它会搞乱对齐。我将尝试根据列数设置宽度，看看效果如何。 - Nilesh

如果您可以提供一个不使用Kendo的示例，我就可以看看能为您想出什么。 - David Shorthose

实际上，这很简单，不需要任何CSS或显式的宽度/高度。我还创建了一个jsfiddle。您将看到两个表格根据网格内容自动调整大小。这就是我想从kendo网格中得到的效果。 - Nilesh

不完美，但我认为这可能更接近您想要的效果。http://dojo.telerik.com/elEwE 问题在于必须覆盖kendo的css才能获得所需的效果。 - David Shorthose