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.
Related
I am having an issue with the data source not being accessed. The webservice executes it's query and firebug shows the return string but I don't get the features of the autocomplete list.
$("#txtCriteria").kendoAutoComplete({
minLength: 1,
suggest: true,
filter: "startswith",
dataTextField: "ACName",
select: function (e) {
var dataItem = this.dataItem(e.item.index());
//output selected dataItem
document.getElementsByName("hdfldSelect")[0].value = dataItem.ACCode;
$("#txtCriteria").kendoAutoComplete();
var autocomplete = $("#txtCriteria").data("kendoAutoComplete");
autocomplete.destroy();
},
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: "../DAL/Reports/wsReports.asmx/AutoComplete",
dataType: "json",
type: "GET",
},
parameterMap: function (data, action) {
var newParams = {
Type: Type,
filter: data.filter.filters[0].value
};//var
return newParams;
},//parameter
}//trans2
})//data
});
Thank you for any assistance
Going along the fact that your endpoint returns the expected data set, you could try adding a 'schema' to your kendo-datasource.
dataSource: new kendo.data.DataSource({
schema: {
data: function (e) {
return e.Results
},
model: {
fields: {
Id: { type: "number" },
Name: { type: "string" }
}
}
},
serverFiltering: true,
transport: {
read: {
url: "../DAL/Reports/wsReports.asmx/AutoComplete",
dataType: "json",
type: "GET",
},
parameterMap: function (data, action) {
var newParams = {
Type: Type,
filter: data.filter.filters[0].value
};//var
return newParams;
},//parameter
}//trans2
})//data
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??
I have a DataSource in my code that support destroy. In order to delete object from the it, i directly call remove, i.e.
myDataSource.remove(discardedData);
I get a behavior similar to this. However, unlike the linked thread, my destroy is not set to a function, so the solution does not help me.
My DataSource (i included all of it in case some of my configuration is to blame):
var QueueMessages = {
type: "aspnetmvc-ajax",
transport: {
read: {
url: BASE_URL + "api/QueueMessages/GetMessagesHeaders",
dataType: "json",
type: "GET",
beforeSend: function (req) {
req.setRequestHeader('Authorization', authService.getAuth());
}
},
destroy: {
url: BASE_URL + "api/QueueMessages/deleteMessage",
dataType: "json",
type: "DELETE",
beforeSend: function (req) {
req.setRequestHeader('Authorization', authService.getAuth());
}
}
},
schema: {
model: {
id: "id",
fields: {
profileName: { type: "string" },
queueType: { type: "string" },
acceptedAt: { type: "date" },
processedAt: { type: "date" },
BodyExcerpt: { type: "string" }
}
},
total: "total",
data: "data",
},
error: function (e) {
//throw user back to login page
if (e.errorThrown === "Unauthorized")
$rootScope.$apply($location.path('/'));
},
requestStart: function () {
},
requestEnd: function () {
},
pageSize: 50,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
serverGrouping: true,
serverAggregates: true
};
I cant find any clues as to why this is happening.
thanks to OnaBai I found the problem.
consulting RFC 7231, i my changed the http DELETE response from 200 OK to 204 no content.
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.
code:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://search.twitter.com/search.json",
dataType: "jsonp",
data: {
q: "kendoui"
}
}
},
schema: {
data: "results",
total: function(response) {
return response.results.length;
}
},
pageSize: 4
});
here i have to set the page size 4 from client side
public JsonResult GetSettings()
{
return Json(new { count = Service.GetSettings<UserSetting>(AuthenticatedUser) }, JsonRequestBehavior.AllowGet);
}
var settingsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetSetting")',
dataType: "json",
type: "GET"
}
},
schema: {
parse: function (data) {
resultCount = data.count;
return data;
}
},
change: function () {
Grid();
}
});
settingsDataSource.read();
function Grid() {
mainGridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetDetails")',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
return JSON.stringify({ filter: options, isPrimary: options.isPrimary });
}
},
schema: {
model: {
fields: {
Status: { type: "string" },
Name: { type: "string" }
}
},
data: function (data) {
return data.data;
},
total: function (data) {
return data.totalCount;
}
},
pageSize: resultCount,
serverFiltering: true,
serverPaging: true
});