title: Kendo UI - Datasource. pass parameters to server using mvvm
body: <p>I'm having trouble using the datasource the right way.</p>
  
  <p>My Goal: create external widget for filtering kendo grid (server side filter).</p>
  
  <p>I managed to make it work, but it's kind of a workaround and I am looking for the corrent approach</p>
  
  <p>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.</p>
  
  <p>this is how my view model looks like (I omitted the less important parts):</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>My markup looks like this: (again, only the important part)</p>
  
  <pre><code>&lt;ul&gt;
              &lt;li&gt;
                  &lt;label for="employeeId"&gt;מספר עובד:&lt;/label&gt;
                  &lt;input type="number" id="employeeId" data-role="maskedtextbox" data-bind="value:employeeId"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="eventId"&gt;מספר אירוע:&lt;/label&gt;
                  &lt;input type="number" id="eventId" data-role="maskedtextbox" data-bind="value:eventId"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="factoryId"&gt;מספר מפעל:&lt;/label&gt;
                  &lt;input type="number" id="factoryId" data-role="maskedtextbox" data-bind="value:factoryId"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="toHilanDate"&gt;תאריך העברה לחילן:&lt;/label&gt;
                  &lt;input type="date" id="toHilanDate" data-role="datepicker" data-bind="value:toHilanDate" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="updateDate"&gt;תאריך עדכון:&lt;/label&gt;
                  &lt;input type="date" id="updateDate" data-role="datepicker" data-bind="value:updateDate" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="event-status"&gt;סטטוס אירוע:&lt;/label&gt;
                  &lt;select id="event-status" data-role="dropdownlist" data-bind="value: selectedStatus, source: statusList" data-text-field="Value" data-value-field="Key" data-option-label=" "&gt;&lt;/select&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="interface"&gt;ממשק:&lt;/label&gt;
                  &lt;select id="interface" data-role="dropdownlist" data-bind="value: selectedInterface, source: interfaceList" data-text-field="Description" data-value-field="Id" data-option-label=" "&gt;&lt;/select&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;button type="submit" data-role="button" data-bind="events: {click:filterGrid}"&gt;סנן&lt;/button&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>