Kendo UI-数据源。使用mvvm将参数传递给服务器

我在正确使用数据源时遇到了麻烦。

我的目标：创建用于过滤剑道网格的外部小部件（服务器端过滤器）。

我设法使其正常运行，但这是一种解决方法，我正在寻找正确的方法

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>