Пользовательский интерфейс кендо — источник данных. передать параметры на сервер с помощью 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>