How can I send 2 params to sub-level treeview.
Sample:
var data2 = {
transport: {
read: {
url: function(options) {
console.log(options);
return kendo.format("/url2/", [options.param1, options.param2]);
},
dataType: "jsonp"
}
},
schema: {
model: {
id: "param4",
fields: {
param4: {type: "number"},
param5: {type: "string"},
},
hasChildren: "param4",
}
}
};
var data1 = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "/url/",
dataType: "jsonp"
}
},
schema: {
model: {
id: "param1",
fields: {
param1: {type: "number"},
param2: {type: "number"},
param3: {type: "string"},
},
hasChildren: "param1",
children: data2
}
}
});
$("#treeview").kendoTreeView({
dataSource: data1,
dataTextField: ["param3", "param5"]
});
When I debug code with console.log(options); only params that pass is param1.
How I can get param2?
There is no sample or documention at KendoUi Demos, is there a easy way or I must just log all select path for this?
You're getting the ID of the item which you can use to get the object from the datasource.
var item = data1.get(options.param1);
Here is an example...
http://jsbin.com/alibem/1/edit
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 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'm trying to use kendoDropDownList in a column of my kendo grid and it's not working.
I'm following the examples on this post, but I guess I'm missing something.
KendoGrid DataSource:
var comboDataSource = new kendo.data.DataSource({
transport: {
read: {
type: "GET",
crossDomain: true,
url: url,
dataType: "json"
}
},
schema: {
data: "data",
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
typeId: { field: "typeId", defaultValue: 1 },
value: { type: "number", validation: { required: true } }
}
}
}
});
KendoDropDownList DataSource:
var typesComboDataSource = new kendo.data.DataSource({
transport: {
read: {
type: "GET",
crossDomain: true,
url: url,
dataType: "json"
}
},
schema: {
data: "data",
model: {
id: "typeId",
fields: {
typeId: { editable: false, nullable: true },
description: { validation: { required: true } }
}
}
}
});
KendoGrid:
$("#grid").kendoGrid({
editable: true,
toolbar: ["create", "save", "cancel"],
dataSource: comboDataSource,
columns: [{
title: "Type",
field: "typeId",
editor: typeDropDownEditor,
template: "#=getType(typeId)#"
}, {
title: "Value",
field: "value"
}]
})
function typeDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "description",
dataValueField: "typeId",
dataSource: typesComboDataSource,
change: function (e) {
var dataItem = e.sender.dataItem();
options.model.set("typeId", dataItem.typeId);
}
});
}
function getType(typeId) {
var data = typesComboDataSource.data();
for (var idx = 0, length = data.length; idx < length; idx++) {
if (data[idx].typeId === typeId) {
return data[idx].description;
}
}
}
For some reason I'm getting the error ReferenceError: getType is not defined and I don't know why.
And if I put the function directly on the template, my data is loaded, but the type field displays as undefined. My typesComboDataSource was not trigger.
$("#grid").kendoGrid({
editable: true,
toolbar: ["create", "save", "cancel"],
dataSource: comboDataSource,
columns: [{
title: "Type",
field: "typeId",
editor: typeDropDownEditor,
template: function getType(typeId) {
var data = typesComboDataSource.data();
for (var idx = 0, length = data.length; idx < length; idx++) {
if (data[idx].typeId === typeId) {
return data[idx].description;
}
}
}
}, {
title: "Value",
field: "value"
}]
});
Can someone help me, please?
Thanks!
Your template functions are evaluated at runtime outside the JQuery code block scope, so it doesn't know what getType is when the code actually runs. Move both the typeDropDownEditor() and getType() functions outside your JQuery block and you should be good to go.
Here's a JSBin example displaying what you're trying to accomplish:
http://jsbin.com/woxidojiyu/edit?js,output
What am I doing wrong? I have a kendo datasource setup as such
var sharedDataSource = new kendo.data.DataSource({
transport: {
read:
{
url: "/Home/ReadStarkArea",
dataType: "json"
},
update:
{
url: "/Home/UpdateStarkArea",
dataType: "json"
},
destroy:
{
url: "/Home/DeleteStarkArea/",
dataType: "json"
},
schema: {
model: {
id: "Id",
fields: {
id: { type: "number", editable: false },
ZipCode: { type: "string" },
CarrierRoute: { type: "string" }
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: sharedDataSource,
autoBind: true,
selectable: true,
toolbar: ["create"],
columns: [
{ field: "ZipCode", title: "Zipcode" },
{ field: "CarrierRoute", title: "Carrier Route" },
{ command: ["edit", "destroy"], title: " " }],
editable: "popup"
});
the URL's defined in the transport all point to methods in my controller. The read works fine but neither the update or destroy call the their methods. Furthermore, once I get the update and delete calling the correct methods, how do I know what data needs updating? does the transport pass a param with the changes?
So im currently using 2 dropdownlists where the second should get items from the server according to the selected item from the first one, the problem is that this only works the first timei click on the child droplist, which means if i change the parent list item the child one will still show the previous items.
Here's some code:
kendofi=function (index){
//kendofi select boxes
$("#dynamicFormLinha"+index).kendoDropDownList({
name:"formularios",
optionLabel: "Formulario",
dataTextField: "name",
dataValueField: "id",
dataSource: {
type: "json",
serverFiltering: true,
transport: {
read: "${pageContext.request.contextPath}" + "/newlayout/mySearchesDynForms.do"
},
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
}
}).data("kendoDropDownList");
$("#campoFormLinha"+index).kendoDropDownList({
autoBind:false,
name:"campos",
optionLabel: "Campo",
dataTextField: "name",
dataValueField: "id",
dataSource: {
type: "json",
serverFiltering:true,
transport: {
read:{
url:"${pageContext.request.contextPath}" + "/newlayout/mySearchesFormFieds.do",
data:function(){
return {formId: $("#dynamicFormLinha"+index).val()
};
}
}
}
},
cascadeFrom: "dynamicFormLinha1",
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
}).data("kendoDropDownList");
And here's the java spring controller class methods for each dropdownlist:
#RequestMapping(method = RequestMethod.GET, value="/newlayout/mySearchesDynForms")
public #ResponseBody
DynamicFormTemplateDPO[] getForms(){
return dynamicFormService.getAllActiveFormTemplatesForPresentation();
}
#RequestMapping(method = RequestMethod.GET, value="/newlayout/mySearchesFormFieds")
public #ResponseBody
DynamicFieldTemplateDPO[] getFormFields(#RequestParam long formId){
return dynamicFormService.getFormFields(formId);
}
These all return json data, the parent child returns this:
[{"id":1,"name":"drcie"},{"id":2,"name":"edp"},{"id":3,"name":"pt"}]
And the id selected is then used as the formId parameter in the getFormFields method, which returns something like this:
[{"id":1,"name":"Nome","type":"STRING"},{"id":2,"name":"Morada","type":"STRING"},{"id":3,"name":"Contribuinte","type":"STRING"},{"id":4,"name":"Multibanco","type":"STRING"}]
The kendofi method here is because these widgets are inside a table and you can add new table rows while maintaining the widgets functionality.
I had the same problem. We managed to solve this by putting the parent and children dropdownlists in one function. See buildLookupDropDownList() function below. Looks like in our situation the children dropdownlists were being called before the parent. Best of luck
var categories
function buildLookupDropDownList() {
categories = $("#LOOKUP_OBJECT_ID").kendoDropDownList({
optionLabel: "#Resources.Global.Builder_Parameter_SelLookup",
dataTextField: "OBJECT_NAME",
dataValueField: "OBJECT_ID",
dataSource: lookupDS,
}).data("kendoDropDownList");
var products = $("#DISPLAY_FIELD").kendoDropDownList({
autoBind: false,
cascadeFrom: "LOOKUP_OBJECT_ID",
optionLabel: "#Resources.Global.Builder_Parameter_SelDisplay",
dataTextField: "DISPLAY_LABEL",
dataValueField: "FIELD_NAME",
dataSource: {
serverFiltering: true,
transport: {
read:
{
url: '#Url.Action("GetFields", "Object")',
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: function () {
var lookuplist = $("#LOOKUP_OBJECT_ID").data("kendoDropDownList");
return { OBJECT_ID: lookuplist.value() };
}
}
},
schema: {
data: function (data) { //specify the array that contains the data
return data.data || data;
}
}
}
}).data("kendoDropDownList");
var orders = $("#VALUE_FIELD").kendoDropDownList({
autoBind: false,
cascadeFrom: "DISPLAY_FIELD",
optionLabel: "#Resources.Global.Builder_Parameter_SelValue",
dataTextField: "DISPLAY_LABEL",
dataValueField: "FIELD_NAME",
dataSource: {
serverFiltering: true,
transport: {
read:
{
url: '#Url.Action("GetFields", "Object")',
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: function () {
var lookuplist = $("#LOOKUP_OBJECT_ID").data("kendoDropDownList");
return { OBJECT_ID: lookuplist.value() };
}
}
},
schema: {
data: function (data) { //specify the array that contains the data
return data.data || data;
}
}
}
}).data("kendoDropDownList");
}