reload data and update listview on select change

3 posts, 0 answers
  1. Morten
    Morten avatar
    267 posts
    Member since:
    Jul 2012

    Posted 22 Mar 2013 Link to this post

    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. Morten
    Morten avatar
    267 posts
    Member since:
    Jul 2012

    Posted 22 Mar 2013 Link to this post

    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();
    }
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 26 Mar 2013 Link to this post

    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!
Back to Top