As per the DataSource documentation, the event "requestStart" has the following description:
Fired when the data source makes a remote service request.
However, when the DataSource sorting is set to local, the event "requestStart" is still being fired causing us bugs.
Kindly advise.
4 Answers, 1 is accepted
The requestStart and requestEnd events will fire with client-side operations and this is made that way by design. Unfortunately, within the requestStart event it is not possible to determine if this is the initial request (requesting the data) or if it is initiated by a data operation (sorting, filtering, etc.). However, within the requestEnd event you can check if the e.reponse is undefined, which will indicate that a client-side operation initiated the read:
requestEnd: function(e){
console.log(e.response);
}
Could you please elaborate on your exact requirement, so we can suggest an alternative solution for it.
I am looking forward to your reply.
Regards,
Konstantin Dikov
Telerik by Progress
Our case is that we have local sorting and remote paging. So when we enter requestStart, we check if the grid has unsaved changes and ask the user if he wants to save. however we don't want to do that wh the user sorts because the sorting is local. And since both requests are read requests and can't be differentiated in the requestStart method then the message will be shown for the user anyway. Using request end is not an option in this case because it would be too late.
check out the following code
serverSorting: false,
requestStart: function (e) {
if (e.type == "read" && gridControl.IsDirty()) {
MessageBox.OpenSaveDialog(function (DialogResult) {
if (DialogResult == MessageBox.DialogResult.Yes) {
gridControl.Save();
}
else if (DialogResult == MessageBox.DialogResult.No) {
gridControl.Cancel();
gridControl._kDataSource.read();
gridControl._kendoGridControl.refresh();
}
});
e.preventDefault();
}
}
Since there is no built-in way for determining which command initiated the read action, you could attach event handler for the "mousedown" event for the column headers and use a global variable. For your convenience, following is a dojo example with such implementation:
<!DOCTYPE html>
<
html
>
<
head
>
<
base
href
=
"http://demos.telerik.com/kendo-ui/grid/editing"
>
<
style
>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</
style
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
href
=
"//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css"
/>
<
script
src
=
"//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"
></
script
>
<
script
src
=
"//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"example"
>
<
div
id
=
"grid"
></
div
>
<
script
>
var sortCommand = false;
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
serverSorting: false,
serverPaging: true,
requestStart: function (e) {
var gridControl = $("#grid").data("kendoGrid");
console.log("requestStart from sortCommand: " + sortCommand )
if (e.type == "read" && !sortCommand) {
//debugger;
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
dataBound: function(e){
//debugger;
sortCommand = false;
e.sender.element.find("[data-role='columnsorter']").one("mousedown", function(e){
sortCommand = true;
console.log("sort");
})
},
sortable: true,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
</
script
>
</
div
>
</
body
>
</
html
>
Hope this helps.
Regards,
Konstantin Dikov
Telerik by Progress