如何为单个剑道网格列设置最大宽度属性？

Posted 2023-05-07

技术标签:

【中文标题】如何为单个剑道网格列设置最大宽度属性？【英文标题】：How can I set a max-width property to individual kendo grid columns? 【发布时间】：2015-04-10 21:30:31 【问题描述】：

这是一个带有示例剑道网格的 jsfiddle：

http://jsfiddle.net/owlstack/Sbb5Z/1619/

这里是我设置剑道列的地方：

$(document).ready(function () 
    var grid = $("#grid").kendoGrid(
        dataSource: 
            data: createRandomData(10),
            schema: 
                model: 
                    fields: 
                        FirstName: 
                            type: "string"
                        ,
                        LastName: 
                            type: "string"
                        ,
                        City: 
                            type: "string"
                        ,
                        Title: 
                            type: "string"
                        ,
                        BirthDate: 
                            type: "date"
                        ,
                        Age: 
                            type: "number"
                        
                    
                
            ,
            pageSize: 10
        ,
        height: 500,
        scrollable: true,
        sortable: true,
        selectable: true,
        change: onChangeSelection,
        filterable: true,
        pageable: true,
        columns: [
            field: "FirstName",
            title: "First Name",
            width: "100px",
        , 
            field: "LastName",
            title: "Last Name",
            width: "100px",
        , 
            field: "City",
            width: "100px",
        , 
            field: "Title",
            width: "105px"
        , 
            field: "BirthDate",
            title: "Birth Date",
            template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #',
            width: "90px"
        , 
            field: "Age",
            width: "50px"
        ]
    ).data("kendoGrid");

    applyTooltip();
);

我为每一列添加了单独的宽度。但是，我还想为每个剑道网格列设置一个最大宽度。是否可以设置最大宽度（不是为所有列设置一个，而是为单个列设置最大宽度？）？

【问题讨论】：

您不能在 within Kendo UI 中执行此操作（此处唯一可用的宽度属性是您已经使用过的那个），但您可能仍然可以使用 javascript 本身来设置最大宽度。也许将列放入一个数组中，然后通过它们在数组中的位置将最大宽度设置为各个列，例如。 0、3、5 等）。现在，如果您要使用 html 设置表格，然后只调用网格 ($("#grid").kendoGrid();)，那么您可能可以使用 CSS 设置每个列的最大宽度内联或使用类。嗯，这不好。你能告诉我一个在数组中设置列的例子吗？谢谢我实际上并不了解 Kendo/jQuery/JavaScript，我只是参考了 Kendo UI 文档。您是否尝试过使用列属性并放置最大宽度？属性：样式：“最大宽度：200px”。实际上，我今天早些时候使用它来为某些列着色。对不起，我的电话。 【参考方案1】：

剑道网格没有像 max-width 这样的属性。解决方案之一是将列的宽度设置为自动调整大小，然后在使用 css 属性的地方使用模板来保持最大宽度。

以下是示例。不确定您是否正在寻找相同的答案。

 <style>.intro  max-width: 100px ;width: 20px ;background-color: yellow;</style>


 <script>
 $(document).ready(function () 
                $("#grid").kendoGrid(
                    dataSource: 
                        type: "odata",
                        transport: 
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                        ,
                        pageSize: 20
                    ,
                    height: 550,
                    groupable: true,
                    sortable: true,
                    pageable: 
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    ,
                    columns: [
                        field: "ContactName",
                        title: "Contact Name",
                        template : '<span class=intro>#:ContactName#</span>'
                    , 
                        field: "ContactTitle",
                        title: "Contact Title"
                    , 
                        field: "CompanyName",
                        title: "Company Name"
                    , 
                        field: "Country",
                        width: 150
                    ]
                );
            );
        </script>

【讨论】：

【参考方案2】：

我有有助于实现此功能的 JavaScript 代码。它为（命令）列提供了一种保持固定大小的方法。

一方面，它充当列的最小大小，但如果网格要增加大小，则强制执行原始大小。这允许其他网格单元的大小增加更多。

查看this dojo，它显示了此代码的运行情况。

请注意，所有列都需要具有指定的宽度（这实际上变成了最小宽度）。

浏览器调整大小事件用于触发网格的大小重新计算。

此功能支持主/从和分组。

此时我还没有考虑调整列大小。

如果您有任何改进的想法，那就去吧！

【讨论】：

Dojo 链接现在似乎已失效。【参考方案3】： .k-grid td 空白：nowrap；文本溢出：省略号；最大宽度：150px；