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.
Related
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
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.
Try to:
$(document).ready(function () {
$('#cityName').autocomplete({
source: function(request,response) {
$.ajax({
type: 'POST',
url: '#Url.Action("Search", "City")',
dataType: 'json',
data: { name: request.term } ,
success: function (data) {
response($.map(data, function (item) {
alert(JSON.stringify(data));
alert(JSON.stringify(item.name));
return {
name: item.name,
label: item.name
}
}));
}
})
},
messages: {
noResults: "", results: ""
}
})
})
In alert(JSON.stringify(data)) got this: {"items":["Boston","Berlin"]}.
In alert(JSON.stringify(item.name)) got this: undefined.
Question: how do it (item.name) works?
You have to just return array of strings:
$(document).ready(function () {
$('#cityName').autocomplete({
source: function(request,response) {
$.ajax({
type: 'POST',
url: '#Url.Action("Search", "City")',
dataType: 'json',
data: { name: request.term } ,
success: function (data) {
response(data.items);
}
})
},
messages: {
noResults: "", results: ""
}
})
})
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
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
});