Question

我有一个正在JS中创建的Kendo网格。这段代码不是我的，而是别人的代码，我真的不认为我们应该改变它的许多基本原理。但是，其中有一列我们理想地希望始终显示为下拉框，或者至少看起来像一个。代码如下：

self.caGridOptions = {
        widget: self.caKendoGrid,
        data: undefined,
        dataSource: {
            schema: {
                model: {
                    fields: {
                        id: { type: "number" },
                        description: { type: "string", editable: false },
                        value: { type: "number", editable: false },
                        caTypeDescription: { type: "string", editable: false }
                    }
                }
            },
            autoSync: true
        },
        sortable: true,
        scrollable: false,
        editable: true,
        columns: [
                { field: "id", title: "Code", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'code') : id #", editor: self.caDropDownEditor },
                { field: "description", title: "Description", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'description') : id #" },
                { field: "value", title: "Value", width: 90, format: "{0:n2}", template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'value') : id #" },
                { field: "caTypeDescription", title: "Type", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'caTypeDescription') : id #" },
                { width: 90, filterable: false, template: kendo.template('<a class="btn btn-danger btn-sm" title="delete"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i>&nbsp;Delete</a>') }
        ],
        dataBound: self.gridButtons,
        noRecords: true,
        messages: {
            noRecords: "There is no data available"
        }
    };
    //
    // functions
    self.getca = function (id, type) {
        if (id == null) return null;
        return self.caOptions().filter(function (item) { return item.id == id; })[0][type];
    };

ID字段（第一列）在编辑时会进入下拉框，如您所见。但是，我们希望它始终显示为下拉框。不一定总是让编辑器打开（我认为这是不可能的，因为剑道只能一次打开一行编辑器），但也许只需将其格式化为下拉列表。

任何帮助将不胜感激。这很麻烦，因为这是一个很小的小事，我们已经在其他地方有工作的例子，但他们的网格主要用cshtml编写（我认为使用Kendo MVC）和我真的不想重写整个网格，因为它非常简单，也可能是依赖于其数据的任何其他函数。

Answer 1

您面临的主要问题是，在您实际开始编辑之前，单元格只是一个表格单元格。那时，它会动态创建输入。

我过去有类似的要求，最后更容易装饰单元格看起来像下拉，而不是尝试在网格的每一行中渲染下拉列表。这允许您保持默认网格行为不变，并允许用户在编辑该单元格时看到将有一个值列表。我们最终只是在显示模板的右侧放置了一个向下箭头图标 - 从您的代码中，看起来您使用的是一些字体很棒的图标，但也有一些由Kendo UI提供 - 所以，模板可能是这样的：

template: '#=id# <span class="k-icon k-icon-s"></span>'

<强>更新

剑道图标取决于您的版本，我在上面的名称中输入了一个拼写错误。无论如何，这是一个你可以看看的例子：

此Kendo演示显示在Category列上添加自定义编辑器（下拉列表）：

http://demos.telerik.com/kendo-ui/grid/editing-custom

如果向下滚动，则会出现一个按钮，用于编辑此示例＆＃34; - 在这里，您会看到“类别”列使用模板：

template: "#=Category.CategoryName#"

您可以将模板更改为以下内容以创建下拉效果：

template: "<span style='border-style:solid; border-width: 1px; padding: 4px; width: 150px; display: block'>#=Category.CategoryName# <span class='k-icon k-i-arrow-60-down' style='float:right'></span></span>"

你可以调整css以使其更接近你想要的，但这会给你一个想法。其他可能性包括实际定义可以应用的css类，因此您不需要包含如此多的内联样式。

Kendo Grid - 使列始终显示为下拉框

1 个答案: