2

有没有办法在剑道网格单元模板中创建小部件？这是示例代码。

columns: [{
    field: "Name",
    title: "Contact Name",
    width: 100
},
{
    field: "Cost",
    title: "Cost",
    template: "<input value='#: Cost #'> </input>",// input must be an numerical up down.

}]

我想为成本列创建一个数字上下。

这是演示

4

3 回答 3

1

在字段定义中使用“编辑器”属性。您必须指定将小部件附加到行/绑定单元格的函数。

这是一个示例，我在网格的每一行中都放置了一个下拉列表：

$('#grdUsers').kendoGrid({
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns: [
            { field: "Id", title: "Id", hidden: true },
            { field: "Username", title: "UserName" },
            { field: "FirstName", title: "First Name" },
            { field: "LastName", title: "Last Name" },
            { field: "Email", title: "Email" },
            { field: "Team", title: "Team", editor: teamEdit, template: "#=Team ? Team.Name : 'Select Team'#" },
            { command: { text: "Save", click: saveEmployee }, width: '85px' },
            { command: { text: "Delete", click: deleteEmployee }, width: '85px' }
        ],
        editable: true,
        toolbar: [{ name: "create-user", text: "New Employee" }]
    });

       function teamEdit(container, options) {
        $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                optionLabel: {
                    Name: "Select Team",
                    Id: ""
                },
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: model.getAllTeams()
            });
    }
于 2014-04-24T05:02:33.167 回答
1

您可以在模板中定义剑道数字文本框绑定。还定义明确调用 kendo.bind 方法的数据绑定函数。我已将您的小提琴更新如下：

  template:  "<input value='#=Cost#'   data-bind='value:Cost' type='number' data-role='numerictextbox' />"

更新的小提琴

于 2014-07-24T06:09:55.670 回答
0 
      <kendo-grid-column title="Billed" field="billed" class="text-center" id="">
        <ng-template kendoGridCellTemplate let-dataItem="dataItem">
          <input type="text" width="10px" value="45"> 
          <a class="anchor_pointer">{{dataItem.billed }}</a>
        </ng-template>
      </kendo-grid-column>
于 2020-09-25T04:28:54.407 回答