css 如何为各个kendo网格列设置max-width属性?

vpfxa7rd  于 2023-02-10  发布在  其他
关注(0)|答案(4)|浏览(170)

下面是一个带有示例剑道网格的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();
});

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

mcdcgff0

mcdcgff01#

剑道网格没有像最大宽度这样的属性。一个解决方案是将列宽设置为自动调整大小,然后使用模板,在模板中使用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>
lmyy7pcs

lmyy7pcs2#

我有JavaScript代码可以帮助实现这个功能,它提供了一种方法让一个(命令)列保持固定的大小。
一方面,它充当列的最小大小,但如果网格要增加大小,则会强制使用原始大小。这允许其他网格单元格增加更大的大小。
查看this dojo,它显示了这段代码的实际应用。
请注意,所有列都需要具有指定的宽度(这实际上成为最小宽度)。
浏览器调整大小事件用于触发网格的大小重新计算。
此功能支持主明细和分组。
此时我还没有考虑调整列大小。
如果你有任何改进的想法,那就去做吧!

apeeds0o

apeeds0o3#

.k-grid td  
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width:150px;
    }
wi3ka0sx

wi3ka0sx4#

是的。
您可以为剑道网格中的列值设置文本框样式的最大宽度...您还可以做更多的事情。但是,您必须使用网格***编辑前***事件手动完成。
例如:

// ELEMENTS
var $gridDiscipline = $('#gridDiscipline')
var grid = $gridDiscipline.kendoGrid();

// EVENTS
grid.bind('beforeEdit', beforeEdit);

// IMPLEMENTATION
function beforeEdit(e)
{
    // Edit Master Row
    // This event raises when ADD_NEW or EDIT is pressed
    // Optionally, I add a slight timeout to ensure the MASTER ROW is "open"
    // Obviously, the elements in your row will be different from mine
    // As you will see...you can do all kinds of late-bound configuration practices here (whatever makes sense for you)
    setTimeout(function () {
        var $container = $('.k-master-row', e.sender.tbody);

        // Elements
        var $cmbContactEmployee = $container.find("#EmployeeId");
        var $txtDisciplineName = $container.find("#DisciplineName");
        var $txtTags = $container.find("#Tags");

        // Instances
        var cmbContactEmployee = $cmbContactEmployee.data('kendoComboBox');

        // Configuration
        cmbContactEmployee.dataSource.transport.options.read.data = function (e) {
            var text = e.filter.filters[0].value;
            return { searchText: text };
        };

        // If a DataAnnotation value exists...you can enforce it    
        var maxlength = $txtDisciplineName.attr('data-val-length-max');
        if (maxlength) {
            $txtDisciplineName.attr('maxlength', maxlength);
        }

        // Or you can set something outright
        $txtTags.attr('maxlength', 100);
    }, 500);
}

相关问题