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??
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 have a KendoUI DataSource
var myDS = new kendo.data.DataSource({
transport: {
read:
{
url: getData,
contentType: 'application/json; charset=utf-8',
},
destroy:
{
url: deleteData,
contentType: 'application/json; charset=utf-8',
},
parameterMap: function(options, operation) {
if (operation !== "destroy" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
name: { type: "string" }
}
}
}
});
I am binding data source to Kendo ListView as follows
var listView = $("#alistview").kendoListView({
dataSource: myDS ,
template: kendo.template($("#template").html())
}).data("kendoListView");;
I have created ListView and widget as follows,
<div id="alistview" style="margin-top:30px"></div>
<script type="text/x-kendo-tmpl" id="template">
<div>
<div>
#:name#
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
</div>
</div>
</script>
</div>
On the delete button click the destroy object of KendoUI DataSource is getting called. My question is how to fetch selected item of the ListView in the destroy object of the datasource. For example I want to read name of the selected item when user click on the delete button.
any help ?
I got the answer. We can use function in the url instead of the object and inside the function selected item which is calling the destroy can be fetched as follows:
var myDS= new kendo.data.DataSource({
transport: {
read:
{
url: getdata,
contentType: 'application/json; charset=utf-8',
},
destroy:
{
url: function (appt) { return deteletedata+ "?accountid=" + appt.Id },
contentType: 'application/json; charset=utf-8',
//data: {
// AccountId: "3"
//}
},
parameterMap: function(options, operation) {
if (operation !== "destroy" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
accountname: { type: "string" }
}
}
}
});
I am working on kendo ui listvie with paging. In this everytime I move to next page it will call datasource. In my scenario if I select 4th page it is calling datasource 4times times.
below is the code
function InitiateContactList() {
var RouteDataSource = null;
RouteDataSource = new kendo.data.DataSource({
serverPaging: true,
type: "aspnetmvc-ajax",
create: {
contentType: "application/json"
},
transport: {
read: {
url: '#Url.Content("~/Partner/GetPartnerContacts")',
data: { lPartnerId: $("#hdnPartnerId").val() },
dataType: "json",
type: "get",
}
},
serverFiltering: true,
pageSize: 2,
schema: {
data: "Data",
total: "Total"
}
});
$("#copyRoutelistdata").kendoListView({
autoBind: false,
dataSource: RouteDataSource,
template: kendo.template($("#Contactstemplate").html()),
//selectable: "single",
//pageable: true,
change: function (e) {
var index = this.select().index();
dataItem = this.dataSource.view()[index];
if (dataItem != null && dataItem.RouteId != null) {
//CopyRoute(dataItem.RouteId);
//HideWindow('MdCopyRouteSearch');
}
},
dataBound: function (e) {
$("#RoutelistPager").kendoPager({
autoBind:false,
dataSource: RouteDataSource
});
}
});
RouteDataSource.read();
}
Thanks in advance.
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");
}