This is a migrated thread and some comments may be shown as answers.

reload data and update listview on select change

2 Answers 1132 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Morten asked on 22 Mar 2013, 10:21 AM
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;  
}

2 Answers, 1 is accepted

Sort by
0
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 22 Mar 2013, 01:05 PM
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();
}
0
Alexander Valchev
Telerik team
answered on 26 Mar 2013, 08:25 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView
Asked by
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Alexander Valchev
Telerik team
Share this question
or