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

テンプレートで剣道数値テキストボックスバインディングを定義できます。kendo.bind メソッドを明示的に呼び出すデータバインド関数も定義します。以下のようにあなたのフィドルを更新しました：

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

更新されたフィドル

于 2014-07-24T06:09:55.670 に答える
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()
            });
    }
于 2014-04-24T05:02:33.167 に答える