解决Kendo ComboBox显示多列走样（备忘）

最新推荐文章于 2024-07-19 15:05:29 发布

chelen_jak

最新推荐文章于 2024-07-19 15:05:29 发布

阅读量2k

点赞数 1

分类专栏： Kendo 实用

本文链接：https://blog.csdn.net/chelen_jak/article/details/52595627

版权

实用同时被 2 个专栏收录

738 篇文章 4 订阅

订阅专栏

Kendo

71 篇文章 2 订阅

订阅专栏

自定一个ComBoBox代码：

    var PubCOTypeCmb = kendo.ui.DataComboBox.extend({
        options: {
            name: "PubCOTypeCmb",
            boName: "PubCOType",
            methodName: "GetCOTypeList",
            params: { where: "1=1" },
            dataValueField: "type_name",
            dataTextField: "type_name",
            listWidth: 230,
            template:
                '<span style="width:50px; float:left; white-space:nowrap;" class="k-state-default">#: type_no #</span>' +
                '<span style="width:160px; float:left; white-space:nowrap;" class="k-state-default">#: type_name #</span>' 
        },
    });
    ui.plugin(PubCOTypeCmb);

一、当选项不多没有出现竖向滚动条时，显示正常, 如下图：

二、当选项增多出现竖向滚动条时，显示就不正常了（第二列的内容跑到下一行了），如下图

经分析后发现问题出在这个 “竖向滚动条” 上。它的出现占用了显示内容的横向宽度，令到本来一行可以放两列内容，现在放不下了，所以第2列只能换另一行了。

【解决方法一】（建议）

    var PubCOTypeCmb = kendo.ui.DataComboBox.extend({
        options: {
            name: "PubCOTypeCmb",
            boName: "PubCOType",
            methodName: "GetCOTypeList",
            params: { where: "1=1" },
            dataValueField: "type_name",
            dataTextField: "type_name",
            listWidth: 250,            
            template:
                '<span style="width:50px; float:left; white-space:nowrap;" class="k-state-default">#: type_no #</span>' +
                '<span style="width:160px; float:left; white-space:nowrap;" class="k-state-default">#: type_name #</span>' 
        },
    });
    ui.plugin(PubCOTypeCmb);

将listWidth的宽度由 230 -> 250，令到即使出现“竖向滚动条“仍有足够的横向宽度来容下两个字段。

【解决方法二】

    var PubCOTypeCmb = kendo.ui.DataComboBox.extend({
        options: {
            name: "PubCOTypeCmb",
            boName: "PubCOType",
            methodName: "GetCOTypeList",
            params: { where: "1=1" },
            dataValueField: "type_name",
            dataTextField: "type_name",
            listWidth: 230,
            template:
                '<div style="width:210px">' + 
                '<span style="width:50px; float:left; white-space:nowrap;" class="k-state-default">#: type_no #</span>' +
                '<span style="width:160px; float:left; white-space:nowrap;" class="k-state-default">#: type_name #</span>' + 
                '</div>'
        },
    });
    ui.plugin(PubCOTypeCmb);

每行显示内容 用div元素作为容器括起来，设定div足够的宽度，保证有足够的度来容下两个字段。

注意：
曾经用 p 元素作为容器，但发现在EditPage页面正常，但放在Browser页就有问题了，如下图：