I have a similar issue, I think. I have a listview template, and capture the click event which modifies items in the listview. When I try to refresh the listview, future click events don't have data. I am not sure I follow the recommended approach. As you can see, I call the RefreshData function to reload the listview after data has changed. You can also see I have attempted to do multiple things, and nothing seems to work correctly. Can you provide any guidance? Here is my code:
var detailsdataSource = new kendo.data.DataSource({
transport: {
read: "api/Details/?staffid=" + "<%=hdnuserid.Value%>" + "&indate=" + "<%=hdndateparam.Value%>"
, contentType: "application/json; charset=utf-8"
, type: "GET"
, data: $(this).serialize()
, dataType: "json"
}
, schema: {
model: {
fields: {
ClientName: { type: "string" }
, ProjectName: { type: "string" }
, Activity: { type: "string" }
, Hours: { type: "string" }
, WIPID: { type: "number" }
, EnabledString: { type: "string" }
, Approved: { type: "boolean" }
, LockDownDate: { type: "date" }
}
}
},
change: function (e) {
var data = this.data();
if (data.length == 0) {
window.location.href = "History.aspx";
}
}
});
function detailListViewDataBindInit() {
$("#detailsview").kendoMobileListView({
dataSource: detailsdataSource
, template: kendo.template($("#detailstemplate").html()),
click: function (e) {
//alert(e);
//alert(e.dataItem);
//alert(e.dataItem.WIPID);
var wipid = e.dataItem.WIPID;
var approved = e.dataItem.Approved;
var visString = e.dataItem.EnabledString;
if (visString.indexOf("hidden") == -1) {
if (approved == true) {
e.preventDefault();
}
else {
if (e.button !== undefined) {
switch (e.button.element.context.innerText) {
case "Edit":
break;
case "Approve":
ApproveTime(wipid);
break;
case "Delete":
if (confirm("Are you sure you want to delete this Time Entry?")) {
DeleteTime(wipid);
}
break;
}
}
}
}
else {
e.preventDefault();
}
}
});
}
function ApproveTime(wipid) {
//var request = $.ajax({
// type: "POST"
// , url: "api/ApproveTime/?wipid=" + wipid
// , dataType: "json"
//});
var request = $.ajax({
type: "GET"
, url: "api/ApproveTime/" + wipid
, dataType: "json"
});
request.done(function (msg) {
alert(msg);
RefreshData();
});
request.fail(function (msg) {
if (msg === null) {
msg = '';
};
alert("Request failed!" + "\n Please try it later.");
RefreshData();
});
}
function DeleteTime(wipid) {
//var request = $.ajax({
// type: "POST"
// , url: "api/ApproveTime/?wipid=" + wipid
// , dataType: "json"
//});
var request = $.ajax({
type: "GET"
, url: "api/DeleteTime/" + wipid
, dataType: "json"
});
request.done(function (msg) {
alert(msg);
RefreshData();
});
request.fail(function (msg) {
if (msg === null) {
msg = '';
};
alert("Request failed!" + "\n Please try it later.");
RefreshData();
});
};
function RefreshData() {
//$("#detailsview").data("kendoMobileListView").destroy();
detailsdataSource.read();
$("#detailsview").data("kendoMobileListView").refresh();
//detailListViewDataBindInit();
//detailsdataSource.read();
//$("#detailsview").data("kendoMobileListView").setDataSource(detailsdataSource);
// This works on Android and is the preferred Method
//var detailsview = $("#detailsview").data("kendoMobileListView").dataSource.read();
//$("#detailsview").data("kendoMobileListView").refresh();
// **********************************************
//var detailsview = $("#detailsview").data("kendoMobileListView").setDataSource(detailsdataSource);
// $("#detailsview").data("kendoMobileListView").dataSource.refresh();
//This actually works????
// window.location.href = "Details2.aspx?indate=" + "<%=hdndateparam.Value%>"
};
</script>