如何在剑道网格单元中创建kendoNumericTextBox？

Question

有没有办法在剑道网格单元格模板中创建widget？以下是示例代码。

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

}]

我想为成本列创建一个向上向下的数值。

这是demo

Answer 1

在您的字段定义中使用"editor“属性。您必须指定一个函数，该函数将把小部件附加到行/绑定单元格。

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

$('#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()
            });
    }

Answer 2

您可以在模板中定义kendo数字文本框绑定。还定义了数据绑定函数，其中显式调用kendo.bind方法。我已经更新了你的小提琴如下：

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

Updated fiddle

Answer 3

      <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>