On a page I have a listview and a pager that both get populated just fine with data from a kendo.data.DataSource. The kendo.data.DataSource calls a asmx webservice with a couple of parameters (_date and _dateSource). The _date and _dateSource parameters get values from a datepicker and a select box.

I can't figure out how to reload the listview and pager when either the datepicker or the select box value changes. I have tried to read the datasource in the onChange event of the datepicker but the values in the data param holds the original values.

Question: how do I reload the datasource (with the changed input parameters) and update both the listview and the pager?

// date picker
$("#dpDate").kendoDatePicker({
  format: "dd-MM-yyyy",
  value: new Date(),
  change: dpDate_onChange
});
var dpDate = $("#dpDate").data("kendoDatePicker");

 var lDataSource = new kendo.data.DataSource({
  data: {
    _date: kendo.toString(dpDate.value(), 'yyyy-MM-dd'),
    _dateSource: $("#ddlDateSource").val()
  }
...
$(".pager").kendoPager({ dataSource: lDataSource, ...
$("#lvPictures").kendoListView({ dataSource: lDataSource, ...

function dpDate_onChange() {
  // calling read on datasource reloads data with original datepicker value
  // lDataSource.read();
 
  // calling refresh on listview reloads datasource (with original datepicker value)
  // var lvPictures = $("#lvPictures").data("kendoListView");
  // lvPictures.refresh;  
}

solved, though I'm not sure if it's the best way:

Separated input param out into var:

var lDataParam = {
  _date: kendo.toString(dpDate.value(), 'yyyy-MM-dd'),
  _dateSource: $("#ddlDateSource").val()
};

var lDataSource = new kendo.data.DataSource({
  transport: {
    read: {
      type: "POST",
      url: "../../ws/data.asmx/GetData",
      data: lDataParam,
      dataType: "json",
      contentType: 'application/json; charset=utf-8',
    },
    parameterMap: function (options) {
      return kendo.stringify(options);
    }
  },
  pageSize: 25,
  schema: {
    parse: function (response) {
      return($.parseJSON(response.d));
    }
  }
});

//datepicker onchange
function dpDate_onChange() {
  lDataParam._date = kendo.toString(dpDate.value(), 'yyyy-MM-dd');
  lDataParam._dateSource = $("#ddlDateSource").val();
  lDataSource.read();
}

Hi Morten,

Your solution looks OK. As a general information, read method of the dataSource allows the developer to pass additional data as optional parameter.

This could be used as alternative approach, in case you would like to avoid using another global variable.

Kind regards,
Alexander Valchev
the Telerik team