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

问题描述

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

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

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

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

小提琴中的HTML

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

解决方案

这里是带有水平滚动条的非常简单的网格(忽略虚拟化)

昨天在您的其他帖子中已经回答: 列线在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.

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