kendo-ui - 剣道 UI - データソース。mvvm を使用してパラメーターをサーバーに渡す

Question

データソースを正しく使用できません。

私の目標: 剣道グリッド (サーバー側フィルター) をフィルター処理するための外部ウィジェットを作成します。

私はそれを機能させることができましたが、それは一種の回避策であり、正しいアプローチを探しています

filterGrid 関数はすべての作業を行いますが、正しく見えません。parametermap 関数にすべての作業を行わせたいのですが、わかりません。お知らせ下さい。

これは私のビューモデルがどのように見えるかです (重要でない部分は省略しました):

var viewModel = kendo.observable({
       selectedInterface: null,
       selectedStatus: null,
       toHilanDate: new Date(),
       updateDate: new Date(),
       employeeId: null,
       factoryId: null,
       eventId:null,
       employees: new kendo.data.DataSource({
            transport: {
                parameterMap: function (data, type) {
                    return { criteria: data };//for the mvc controller
                },
                read: {
                    url: "tohilan/Employees",
                    type: "post",
                    data: {}
                }
            }
        }),
        filterGrid: function () {
            var data = {
                SelectedInterface: this.selectedInterface ? this.selectedInterface.Id:null,
                SelectedStatus: this.selectedStatus? this.selectedStatus.Key:null,
                ToHilanDate: kendo.toString(kendo.parseDate(this.toHilanDate), "d"),
                UpdateDate: kendo.toString(kendo.parseDate(this.updateDate), "d"),
                EmployeeId: this.get("employeeId"),
                FactoryId: this.get("factoryId"),
                EventId: this.eventId,
            };
            //set new data into datasource
           $('#employeeGrid').data('kendoGrid').dataSource.transport.options.read.data = data;
            //refresh grid
            $('#employeeGrid').data('kendoGrid').dataSource.read();
            $('#employeeGrid').data('kendoGrid').refresh();
        }
});
      kendo.bind($("#employees-view"), viewModel);

私のマークアップは次のようになります: (ここでも、重要な部分のみ)

<ul>
            <li>
                <label for="employeeId">מספר עובד:</label>
                <input type="number" id="employeeId" data-role="maskedtextbox" data-bind="value:employeeId"/>
            </li>
            <li>
                <label for="eventId">מספר אירוע:</label>
                <input type="number" id="eventId" data-role="maskedtextbox" data-bind="value:eventId"/>
            </li>
            <li>
                <label for="factoryId">מספר מפעל:</label>
                <input type="number" id="factoryId" data-role="maskedtextbox" data-bind="value:factoryId"/>
            </li>
            <li>
                <label for="toHilanDate">תאריך העברה לחילן:</label>
                <input type="date" id="toHilanDate" data-role="datepicker" data-bind="value:toHilanDate" />
            </li>
            <li>
                <label for="updateDate">תאריך עדכון:</label>
                <input type="date" id="updateDate" data-role="datepicker" data-bind="value:updateDate" />
            </li>
            <li>
                <label for="event-status">סטטוס אירוע:</label>
                <select id="event-status" data-role="dropdownlist" data-bind="value: selectedStatus, source: statusList" data-text-field="Value" data-value-field="Key" data-option-label=" "></select>
            </li>
            <li>
                <label for="interface">ממשק:</label>
                <select id="interface" data-role="dropdownlist" data-bind="value: selectedInterface, source: interfaceList" data-text-field="Description" data-value-field="Id" data-option-label=" "></select>
            </li>
            <li>
                <button type="submit" data-role="button" data-bind="events: {click:filterGrid}">סנן</button>
            </li>
        </ul>