reload data and update listview on select change

[Morten]

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;  
}

[Morten]

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();
}

[Alexander Valchev]

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.

dataSource.read({ foo: "foo", bar: "baz" });

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