I know this question has been asked with answers I have reviewed over and over. I still can not get this kendo dataSource update function to fire. It fires without the function(e) {}
update:
{
url: "/SettingsAdmin/UpdateGrid",
dataType: "json",
type: "POST",
//data: {
// result: kendo.stringify(result.data)
//},
},
That works. What doesn't work is when I try implementing the update as a function
update: function(e)
{
debugger
alert("update")
$.ajax({
url: "/SettingsAdmin/UpdateGrid",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {
models: kendo.stringify(e.data.models)
},
success: function (result) {
alert(e.success(result));
},
error: function (result) {
alert(e.error(result))
e.error(result);
}
});
},
Here is the whole dataSource defined.
return new kendo.data.DataSource({
transport: {
read: {
url: url,
contentType: 'application/json; charset=utf-8',
type: "POST",
dataType: "json"
},
update:
{
url: "/SettingsAdmin/UpdateGrid",
dataType: "json",
type: "POST",
//data: {
// result: kendo.stringify(result.data)
//},
},
update: function(e)
{
debugger
alert("update")
$.ajax({
url: "/SettingsAdmin/UpdateGrid",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {
models: kendo.stringify(e.data.models)
},
success: function (result) {
alert(e.success(result));
},
error: function (result) {
alert(e.error(result))
e.error(result);
}
});
},
parameterMap: function (data, operation) {
return JSON.stringify(data);
}
},
schema:
{
data: "result.data",
total: "result.total",
aggregates: "result.aggregates",
groups: "result.groups",
errors: "result.errors",
model:
{
id: "name",
//fields: {
// //id: { required: false, type: 'number', nullable: true },
// name: { editable: false, type: "string" },
// value: { editable: true, type: "string" }
//}
}
},
pageSize: 10,
batch: false,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
});
All transport actions (read, update, create, destroy) must be defined in the same way which I wasn't doing. I had defined my read action as
read: {
url: url,
contentType: 'application/json; charset=utf-8',
type: "POST",
dataType: "json"
},
And then the update with a function
update: function(e)
{ }
Can't do that. I need to define my read: as a function
Related
My kendo grid is not showing data after successfully calling a web method and seeing data being returned in the ajax request.
$(document).ready(function () {
var filterSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: "GET",
url: "DoJo.aspx/GetProjects",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// msg.d has the json data
}
});
}
},
schema: {
model: {
fields: {
ProjNum: {type: "string"},
Stat: {type: "string"}
}
},
data: "d"
},
change: function (e) {
// e.items is empty
}
});
$("#grid").kendoGrid({
dataSource: filterSource,
columns: [
{
field: "ProjNum", title: "Project Number", width: "130px", filterable: {
multi: true,
dataSource: filterSource
}
},
{
field: "Stat", title: "Status", filterable: {
multi: true,
dataSource: filterSource
}
}
]
});
})
The JSON below is in an array format.
[{"ProjNum":"12345","Stat":null,"ProjTitle":"Test Title","ClientName":"Test Client","ClientContactName":"Test Name","ClientFacilityLocation":"Test Location","SourceOfContact":"Test Contact","ProjManager":"Test Manager","Department":"Test Department"}]
Why is change callback returning an empty e.items? If I remove data: "d" it returns e.Items with the JSON data.
When you set dataSource.transport.read to a function and invoke the ajax call yourself, you need to pass the result (or error) back into the dataSource, like so:
var filterSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: "GET",
url: "DoJo.aspx/GetProjects",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// msg.d has the json data
// notify the data source that the request succeeded
options.success(msg);
},
error: function(msg) {
// notify the data source that the request failed
options.error(msg);
}
});
}
},
schema: {
model: {
fields: {
ProjNum: { type: "string" },
Stat: { type: "string" }
}
},
data: "d"
},
change: function (e) {
// e.items is empty
}
});
See the documentation for more information.
I want to populate a Kendo dropdownlist with data from a database.
That's what I call the "frwMantenimientoEmpresas.aspx / SelectProvincias" method.
My problem is that the value "undefined" after making the call, in the dropdownlist appears ...
dataSource1 = new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
beforeSend: function (req) {
//alert("");
},
async: false,
url: "frwMantenimientoEmpresas.aspx/SelectProvincias",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8"
}
},
schema: {
model: {
fields: {
UIDProvincia: { type: "int" },
Nombre: { type: "string" }
}
}
}
});
$("#dropProv").kendoDropDownList({
dataSource:dataSource1,
dataTextField: "Nombre",
dataValueField: "UIDProvincia",
autoBind: true,
});
The read method calls the server SelectProvincias method correctly..
At this point dropDownList = undefined??
Here is my tree view of KendoUI:
<script src="~/scripts/kendo.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var regions = {
type: "odata",
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllRegions?countryID=?" + options.ID,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
},
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
};
var countries = {
type: "odata",
schema: {
model: {
id: "Id",
hasChildren: "HasChildren",
children: regions
}
},
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllCountries?territoryID=?" + options.ID,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
}
}
};
var Territories = new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllTerritories",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
}
},
schema: {
model: {
hasChildren: "HasChildren",
Id: "ID",
children: countries
}
}
});
$("#treeview").kendoTreeView({
dataSource: Territories,
dataTextField: ["Name", "Name", "Name"],
dataValueField:"ID"
});
});
</script>
The hierarchy is Territories->countries->regions
I can see the territories populating, but I am unable to fetch the ID property of selected Territory so that countries can be populated, that is in ajax call,
options.ID is undefined there.
I get onloading the jqGrid a error as follow:
load error: Error: Invalid XML: {"d":[{"id":1,"name":"Medical
1","city":"Kiev","instituteTypeId":0},{"id":2,"name":"Medical
2","city":"Kherson","instituteTypeId":0}]}
however I use JSON, oleg advised me to open new threat.
The jquery code is:
mtype: 'POST',
contentType: "application/json",
url: "dataServices/objects.asmx/InvokeData",
ajaxGridOptions: {
contentType: 'application/json; charset=utf-8'
},
postData: JSON.stringify({q: "med&1"}),
loadonce: true,
dataType: 'json',
jsonReader: {
root: function (obj) {
alert(obj.d);
return obj.d;
},
page: "",
total: "",
records: function (obj) {
return obj.d.length;
},
},
gridview: true,
loadError: function (xhr, status, error) {
alert('load error: ' + error);
},
There is no dataType= xml or anything defined....
You use dataType: 'json' which is wrong. jqGrid has the option datatype and no dataType. So you should use dataType: 'json'. Unknown option dataType will be just ignored and default option dataType: 'xml' will be used.
Additionally I think you should use just jsonReader: { root: "d" }.
The demo should be close to what you need. So you should do something like
$("#list").jqGrid({
mtype: 'POST',
url: "dataServices/objects.asmx/InvokeData",
datatype: "json",
ajaxGridOptions: {
contentType: "application/json; charset=utf-8"
},
postData: JSON.stringify({q: "med&1"}),
loadonce: true,
jsonReader: { root: "d" }
...
});
When new entry added into datagrid, and if page is not refreshed but some rows deleted,
tornado receives same added data as post, along with delete method
Why is that happening? I have differnt transport methods for each:
transport: {
read: {
url: '/api/notes/',
dataType: 'json',
type: 'GET',
},
create: {
url: '/api/notes/',
dataType: 'json',
type: 'POST'
},
update: {
url: '/api/notes/',
dataType: 'json',
type: 'PUT',
},
destroy: {
url: function(row) {
return '/api/notes/' + row.id;
},
type: 'DELETE',
},
ok, doing $("#grid").data("kendoGrid").dataSource.read(); on create.complete fixed it.