剑道网格列宽+可滚动 [英] Kendo Grid Column Width + Scrollable

问题描述

我正在尝试从 javascript 绑定到可滚动的剑道网格，但在列宽方面存在一些问题.这个 fiddle 演示了这个问题(问题末尾的代码).我在 html 中指定标题并为其中一个标题添加宽度.然后 javascript 设置数据源(在生产代码中，这是通过 ajax 调用完成的).

我想避免在 javascript 中设置 columns.width 属性，因为

• 我有很多网格，因为我的视图模型是精心构建的，所以能够自动识别所需的列.我们的应用中有 100 多个网格，必须为所有网格指定列列表会很麻烦.
• 总之感觉不对，这是样式信息.

我确实理解该功能是由于 kendo 创建了两个网格，一个用于标题，另一个用于滚动内容.但是，我过去使用过的其他做类似事情的控制库总是复制两个网格之间的样式信息，以便在保持两个表同步的同时促进声明式样式 - 我只是不确定剑道"是什么方法是.

来自小提琴的 HTML

<头><th class="p20" data-field="status">Status</th><th data-field="description">Description</th></thead>

Javascript

$('table').kendoGrid({数据源: [{ status: 'On', description: 'a long description' },{ status: 'On', description: 'a long description' },{ status: 'On', description: 'a long description' },{ status: 'On', description: 'a long description' },{ status: 'On', description: 'a long description' },{状态:'开'，描述:'更长的描述'}],可滚动:真});

CSS

.k-grid-content {高度:100px；}.p20 {宽度:20%；}

解决方案

这里是带有水平滚动条的非常简单的网格(忽略虚拟化)http://demos.kendoui.c​​om/web/grid/virtualization-remote-data.html.在你的网格上有一个宽度，或者它是每列的父级和宽度，它们的总和超过实际的网格宽度，然后你得到你的滚动条:

{ field: "OrderID", title: "Order ID", width: 60 },

昨天已经在你的另一篇文章中回答了:Kendo 网格中的列线不同步

或者

http://jsfiddle.net/vojtiik/2ApvC/3/

请注意，我使用的是更新版本的 kendo 和 jQuery，然后您使用了.

I'm trying to bind to a scrollable kendo grid from javascript and having a few issues with column widths. This fiddle demonstrates the issue (code at the end of the question). I'm specifying the headers in the html and adding a width to one of the headers. The javascript then sets the dataSource (in production code this is done via an ajax call).

I want to avoid having to set the columns.width property in the javascript because

• I have many grids that, since my viewmodels are carefully constructed are able to automatically discern the columns required. We have over 100 girds in our app and having to specify the column list for all of them would be unwieldy.
• It feels wrong anyway, this is styling information.

I do understand that the functionality is due to kendo creating two grids, one for the headers and one for the scrolling content. However, other control libs I have used in the past that do similar things have always copied the styling information between the two grids in order to facilitate declarative styling while keeping the two tables in sync - I'm just not sure what the "kendo" way for this is.

HTML from fiddle

<table>
    <thead>
        <th class="p20" data-field="status">Status</th>
        <th data-field="description">Description</th>
    </thead>
</table> 

Javascript

$('table').kendoGrid({
    dataSource: [
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' }
    ],
    scrollable: true
});

CSS

.k-grid-content {
    height: 100px;
}
.p20 {
    width: 20%;
}

解决方案

Here is quite straight forward grid with horizontal scrollbar (ignore the virtualization) http://demos.kendoui.com/web/grid/virtualization-remote-data.html. Have a width on your grid or it's parent and width for each column with their sum over the actual grid width then you get your scrollbar:

{ field: "OrderID", title: "Order ID", width: 60 },

Already answer yesterday in your other post : Column lines are not in sync in a Kendo grid

Or

http://jsfiddle.net/vojtiik/2ApvC/3/

Note I am using bit newer version of kendo and jQuery then you do.

这篇关于剑道网格列宽+可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！