How to change datasource in kendo listview

Question

This is the method I have used to bind remote data to ListView based on the date.

function getListData(date) { 

    $.ajax({
        type: "POST",
        url: wcfurl + "getList",
        data: '{"date":"' + date + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        processdata: true,
        success: function (data) {
            $.each(data, function (i, item1) {
                listds = item1;                                                
            });                    
            $("#listview").kendoListView({                        
                dataSource: new kendo.data.DataSource({
                    data: JSON.parse(listds)                                      
                }),                        
                template: kendo.template($("#template").html()),
                altTemplate: kendo.template($("#altTemplate").html()),
                selectable: true,
                change: function () {
                    var index = this.select().index(), dataItem = this.dataSource.view()[index];
                    alert("id: " + dataItem.id + ", table: " + dataItem.tableno);
                }
            });                   
        },
        error: function (result) {
            alert("error : " + result);
        }
    }); 
}

From following method I pass the date to this [getListData(date)] method.

function initCalander() {
    $.ajax({
        success: function () {
            var today = new Date(),
            events = [+new Date(today.getFullYear(), today.getMonth(), 10),
             +new Date(today.getFullYear(), today.getMonth(), 20)];
            $(".calendar").kendoCalendar({
                value: today,
                dates: events,
                change: function () {
                    var d = kendo.toString(this.value(), 'd');
                    getListData(d);
                }
            });
        }
    });
}

This works perfectly initially, But if I change the date the list rebinds with current data, till now ok, the problem is, in change of listview the alert message appears two times, on first it displays old data, and second time only it displays current data.

I don't know what is the problem. Any help will be highly appreciable.

Thanks.

Answer 1

You are initializing the ListView multiple times, this is not something that I would recommend.

Instead you can initialize the ListView and Calendar only once - when the DOM ready event is triggered and from then on you can use the methods of the dataSource such as dataSource.data to set the underlying collection.

Answer 2

try this

 function initCalander() {
        $.ajax({
              ..
              var d = kendo.toString(new Date(result.Value), 'd');
              getListData(d);
              ..
        });
    }