Question

我一直在使用一个KendoGrid，它有两个级别的组，如图所示：

我现在需要做的是减少组列的宽度。

我使用jquery测试此代码：

$(".k-group-col,.k-group-cell").css('width', 10)

......它有效，但只是片刻。（可能有一个kendo函数可以重置该宽度。）

请帮忙。谢谢！

Answer 1

大组列的这个问题通常是由具有显式宽度的所有其他列引起的，这些列太小，因此它们的总和小于网格的总宽度。在这种情况下，浏览器会扩展列。

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#columns

保留至少一列没有宽度的列，或设置更大的列宽。不需要自定义CSS。

更新：组列已经有一个默认宽度，足够小。

Answer 2

只需添加：

我创建了一个具有动态宽度的示例（因此列宽可以是比率，而不必是显式宽度）

http://jsfiddle.net/2cf1w0t8/

这是列定义和dataBound中的事件，该事件设置“ group col”宽度。

dataBound: function(e){
            e.sender.element.find(".k-group-col,.k-group-cell").css('width', 2)
        },
        columns: [
            {
                field: "HistoryDate",
                groupHeaderTemplate: function(args){
                    return '<span class="row_'+args.uid+'">' + kendo.toString(args.value, 'dd.MM.yyyy') + '</span>';
                },
                hidden: true,
                filterable: false,
                width: 0
            },
            {
                field: "Titelbezeichnung",
                template: function(items){
                    return items.Titelbezeichnung + '<br>' + (items.Titelbezeichnung2 ? items.Titelbezeichnung2 : '&nbsp;');
                },
                width: 30,
            },
            {
                field: "ISIN",
                filterable: false,
                width: 10,
            },
            {
                field: "Valor",
                filterable: false,
                width: 10,
            },
            {
                field: "Ticker",
                width: 10,
            },
            {
                field: "SecurityCCY",
                attributes:{ align:"center" }, headerAttributes: { 'class': 'k-header-centeralign' },
                filterable: false,
                width: 10,
            },
            {
                field: "RiskCCY",
                attributes:{ align:"center" }, headerAttributes: { 'class': 'k-header-centeralign' },
                filterable: false,
                width: 10,
            },
            {
                field: "Typ",
                filterable: false,
                width: 10,
            },
            {
                field: "LastPrice",
                attributes:{ align:"right" }, headerAttributes: { 'class': 'k-header-rightalign' },
                filterable: false,
                format: '{0:n4}',
                width: 10,
            },
            {
                field: "PriceDate",
                attributes:{ align:"right" }, headerAttributes: { 'class': 'k-header-rightalign' },
                filterable: false,
                format: "{0:dd.MM.yyyy}",
                width: 10,
            },
            {
                field: "Status",
                attributes:{ align:"right" }, headerAttributes: { 'class': 'k-header-rightalign' },
                filterable: false,
                width: 10,
            },
            {
                field: "Percentage",
                attributes:{ align:"right" }, headerAttributes: { 'class': 'k-header-rightalign' }, footerAttributes: { align: 'right' }, groupFooterAttributes: { align: 'right' },
                format: "{0:n2}",
                editor: editNumberDecimals,

                aggregates: ["sum"],
                groupFooterTemplate: '<span class="footerPercentage">#=sum#%</span>',
                filterable: false,
                width: 20,
            },
            //{ command: {name: "destroy", text: ' '}, title: " ", attributes:{ align:"right" }, headerAttributes:{'style':'text-align: right'}, },
        ]

如何设置kendogrid组列的宽度

2 个答案: