剑道网格编辑内联下拉列表不显示

Kendo Grid edit inline with dropdown list isn't show

本文关键字:下拉列表 显示 网格 编辑      更新时间:2023-09-26

我在使用网格内的下拉列表内联编辑剑道网格时遇到问题,这是我的屏幕截图

屏幕拍摄1->请看字段"图标"

当我单击图标的字段时,该字段更改为下拉列表喜欢这个屏幕截图2 在我单击字段图标后

那么我该怎么办,如果我希望字段图标是单击前的下拉列表?

这是我的代码:

$("#customers").kendoDropDownList({
        dataTextField: "pis_icon_url",
        dataValueField: "pis_icon_id",
        valueTemplate: '<span class="selected-value" style="background-image: url(''#:pis_icon_url#'')"></span>',
        template: '<span class="k-state-default" style="background-image: url(''#:pis_icon_url#'')"'></span>',
        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    url: "/api/icon-priority"
                }
            },
            schema:{
                data:'list'
            }
        },
        height: 400
    });
var dropdownlist = $("#customers").data("kendoDropDownList");
/

/in 字段:"pis_icon_id",请检查"模板",我已经在标签输入中添加了属性"id='customers'",但它不起作用

$("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 550,
    columns: [
        { field:"pis_priority_name",title:"Priority Name", width: "180px"  },
        { field: "description", title: "Description", width: "380px" },
        { field: "pis_icon_id", title: "Icon", width: "300px",template:"<input id='customers' data-bind='value:pis_icon_id' style='width:100%;'>",
            editor:categoryDropDownEditor
                // "<div style='width: 100%;'><img src='#:pis_icon_url#' style='width: 22px;height: 22px;'> </div>"
        },
        { field: "pis_priority_color", title: "Color",
            width: "100px",
            editor: function (container, options) {
                $("<input type='color' name='"+options.field+"' data-bind='value:" + options.field + "' />")
                    .appendTo(container)
                    .attr("pis_priority_color", options.field)
                    .kendoColorPicker({
                        buttons: true
                    });
            },
            template: "<span style='display: inline-block; width: 50%; height: 50%; background-color: #= pis_priority_color #'></span>"
        },
        { field: "is_default",
            title: "Default",
            width: "100px",
            template:"<input name='is_default' class='ob-paid' type='checkbox' data-bind='checked: is_default' #= is_default? checked='checked' : '' #/> "
        },
        { field: "active",
            title:"Active",
            template:"<input name='active' class='ob-paid' type='checkbox' data-bind='checked: active' #= active ? checked='checked' : '' #/> "
            ,width: "130px"
        },
        { command: "destroy", title: " ", width: "150px" }],
    editable: {
        update:true
    }

我能够使用 MVC 包装器并遵循这篇文章来让它工作:

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration

关键是由于已知的 Kendo 网格错误而添加保存事件 - 在我看来,Kendo 文档应该提到这个问题。

我尝试使用 javascript 实现实现相同的逻辑,但无法使其工作。