jquery - 在模板中的剑道网格单元格中显示下拉菜单

Question

我有一个剑道网格工作正常，但我想在列的所有单元格中显示下拉列表，即“安全操作”列单元格。无论您是否编辑，以便用户知道这是该单元格中的下拉菜单。我不希望这样，当单击单元格时，下拉菜单会出现如 this 中提到的那样剑道演示网站。

我的代码如下

HTML:

<div id="example" class="k-content">
    <div id="clientsDb">
    <div id="grid" style="top:0px;width:100%;height: 380px">
    </div>              
    </div>

CSS:

<style scoped>
#clientsDb {
     width: 1400px;
         height: 310px;
     margin: 0 auto;
     padding: 0 4px 0 4px;
     background: url('../kendo/content/web/grid/clientsDb.png') no-repeat 0 0;
      }
</style>

JS:

 <script>
        function kendoGridExecute(data){
        $(document).ready(function() {

                                    $("#grid").kendoGrid({
                                        dataSource: {
                                            data: data.items,
                                            autoSync: true,
                                            schema: {
                                                model: {
                                                  fields: {
                                                        Type: { editable: false, nullable: true },
                                                        Penalty:{ editable: false, nullable: true },
                                                        Init_r:{ editable: false, nullable: true },
                                                        Opt_r:{ editable: false, nullable: true },
                                                        Change_r:{editable: false, nullable: true},     
                                                        Action:{defaultValue : {text: "No Action", value: "No Action" } }                               
                                                        }
                                                }
                                            }

                                        },
                                        groupable: true,
                                        sortable: true,
                                        scrollable: true,
                                        filterable: true,
                                        editable : true,

                                        columns: [ {
                                                field : "Type",
                                                width : 90,
                                                title : "Type"                                      
                                            } , {
                                                field : "Penalty",
                                                width : 120,
                                                title : "Penalty"

                                            } , {
                                                width : 50,
                                                field : "Bmk",
                                                title : "Abs. Bmk",
                                                template:"<input class='k-textbox' data-bind='value: Bmk' style='width:50px'>"     
                                            } , {
                                                width : 50,
                                                field : "Init_r",
                                                title : "Rel. Init"
                                            } , {
                                                width : 50,
                                                field : "Opt_r",
                                                title : "Rel. Opt"
                                            } , {
                                                title : "Rel. Chg",
                                                field : "Change_r",
                                                width : 50
                                            },{
                                                title : "Min",
                                                field : "Min",
                                                width: 50,
                                                template:"<input class='k-textbox' data-bind='value: Min' style='width:50px'>" 
                                            },{
                                                title : "Max",
                                                field : "Max",
                                                width : 50,
                                                template:"<input class='k-textbox' data-bind='value: Max' style='width:50px'>" 
                                            },{
                                                field : "Scale",
                                                title : "Scale",
                                                width : 50,
                                                template:"<input class='k-textbox' data-bind='value: Scale' style='width:50px'>" 
                                            },
                                            {
                                                field : "Init",
                                                title : "Abs. Init",
                                                width : 50
                                            },
                                            {
                                                field : "Opt",
                                                title : "Abs. Opt",
                                                width : 50
                                            },
                                            {
                                                field : "Action",
                                                title : "Security Action",
                                                width : 100,
                                                editor: securityActionDropDownEditor,
                                                template: "#=Action#" 
                                            }
                                        ],
                                        batch: true,
                                        dataBound: function() {
                                            var rows = this.tbody.children();
                                            var dataItems = this.dataSource.view();
                                                for (var i = 0; i < dataItems.length; i++)  {
                                                  kendo.bind(rows[i], dataItems[i]);
                                                }
                                            }


                                    });
                                });


                            }
                            function securityActionDropDownEditor(container, options) {

                                $('<input required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')
                                    .appendTo(container)
                                    .kendoDropDownList({
                                                dataSource: [ 
                                                              { text: "No Action", value: "No Action" },
                                                              { text: "DNS", value: "DNS" },
                                                              { text: "DNB", value: "DNB" },
                                                              { text: "DNT", value: "DNT" }
                                                 ],
                                                 autoBind: false,
                                                 index:0
                                    });
                                console.log(options);
                                console.log(options.field);
                            }
                            </script>

Answer 1

您可以使用客户端模板和一些自定义逻辑来实现，以便在 Grid 的 dataBound 事件发生时初始化 DropDownLists。

假设您的列有以下模板:

template: "<input value='#= PositionID #' data-bind='value:PositionID' data-role='dropdownlist' data-source='options' data-text-field='Text' data-value-field='Value' />"

其中 options 是一个全局变量，其中包含要用作数据源的集合

 var options = [{Text:"T1",Value:"V1"}...]

然后在dataBound上Grid 事件，您可以将该 DropDownList 绑定(bind)到该行的底层模型，如下所示:

function onGridDataBound() {
    var grid = this;
    this.tbody.find('tr').each(function () {
        var item = grid.dataItem(this);
        kendo.bind(this, item);
    })
}