Kendo UI - Datasource. pass parameters to server using mvvm - kendo-ui

Question

I'm having trouble using the datasource the right way.
My Goal: create external widget for filtering kendo grid (server side filter).
I managed to make it work, but it's kind of a workaround and I am looking for the corrent approach
The filterGrid function do all the work but it doesn't look right,
I want the parametermap function to do all the work but I can't figure it out.
Please advise.
this is how my view model looks like (I omitted the less important parts):
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);
My markup looks like this: (again, only the important part)
<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>

Answer 1

I guess I found an answer, maybe I had a typo or something.
I created the data object in the parametermap function instead of the filterGrid function. I just replaced "this" with viewModel. I still think that there is even better way to deal with it but at the moment it serve me just right.