0

次のように、Knockout-Kendo プラグインを使用してコードで定義された KendoUI グリッドがあります。このグリッドの列数は、サーバーから受信した json に応じて変化することに注意することが重要です。

<script type="text/html" id="grid">
    <div class="grid-input input" data-bind="kendoGrid:
    {
        data: RowList,
        columns: ko.toJS(GridHeader.ColumnDefinitionList),
        rowTemplate: 'kendoui-grid-row',
        altRowTemplate: 'kendoui-alt-grid-row',
        useKOTemplates: true,
        scrollable: false,
        pageable: { pageSize: 10 },
        sortable: true
    }"></div>
</script>

<script type="text/html" id="kendoui-grid-row">
    <tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }"></tr>
</script>

<script type="text/html" id="kendoui-alt-grid-row">
    <tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }" class="k-alt"></tr>
</script>

<script type="text/html" id="grid-row">
    <td><div class="grid-button delete-row-button"><span class="icon-delete"></span></div></td>
    <!-- ko foreach: CellList -->
    <td data-bind="template: { name: Input.Type, data: Input }">
    </td>
    <!-- /ko -->
</script>

<script type="text/html" id="text">
    <input class="text-input input k-textbox" data-bind="value: Value" />
</script>

この場合、テキスト ボックスで満たされたグリッドがあります (グリッドの各セルには、テキスト タイプの入力があります)。今私の問題は、入力にテキストがあってもグリッドヘッダーをクリックしてソートしても何も起こらないことです。私がやりたいことは、ソートの対象を定義できるようにすることです。この場合、それはグリッド セル内の入力の値になります。

4

1 に答える 1

1

少し前に同様の問題に遭遇しました。問題は、Kendo Grid が ko オブザーバブルでうまく機能しないことでした。回避策として、データをプレーンな JS オブジェクトとして返す計算済みを作成できます。

this.RowList.asJS = ko.computed(function() {
    return ko.toJS(this.RowList());
}, this);

次にdata: RowList、次のように変更します。

data: RowList.asJS

ただし、これは、行テンプレートのオブザーバブルが失われることを意味します。これを回避するには、行内で元のオブジェクトを再度取得します。

最初に、ID でアイテムをすばやく取得するためのヘルパー関数を作成します (Id プロパティがあると仮定します)。

this.RowList.getById = function(id) {
    return ko.utils.arrayFirst(this.RowList(), function(row) {
         return ko.unwrap(row.Id) === id;
    });
}, this);

getByIdこれで、行テンプレート内で呼び出すことができます:

<script type="text/html" id="kendoui-grid-row">
    <!-- ko with: $root.RowList.getById(Id) -->
        <tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }"></tr>
    <!-- /ko -->
</script>
于 2014-04-28T13:56:27.353 に答える