thank you in advise.
I have a grid, which has a double click, in turn creates a Edit popup, which houses multiple dropdowns.
On edit calls the datasource loaders for each dropdown.
All is well how ever, receiving this on the loading of the dropdowns:
stack "Error: jQuery1123047111043296889754_1506004893382 was not called\n at error (https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js:2:1808)\n at b.converters.script json (https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js:4:28737)\n at Xb (https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js:4:19067)\n at y (https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js:4:22513)\n at c (https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js:4:26989)"
with the returning data being:
responseText "[{\"Vendor_Key\":1,\"VendorName\":\"Diebold\"},{\"Vendor_Key\":2,\"VendorName\":\"NCR\"},{\"Vendor_Key\":3,\"VendorName\":\"WINCOR\"}]"
I have used this before in other applications, but not in 2017.3.913.
the code related:
<script id="ModifyInventoryTemplate" type="text/x-kendo-tmpl">
<form id="modifyinventoryform" >
<div id="inputWindow" class="responsive-table-line" style="margin:0px 25px 0px; width:650px; height:300px">
<table class="auto-style2" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
<div >
<label for="serialnumbertext">Serial Number:</label>
</div>
</td>
<td>
<div>
<input id="serialnumbertext" name="serialnumber" data-bind="value:SerialNumber" required />
<span class="k-invalid-msg" data-for="serialnumbertext"></span>
</div>
</td>
<td>
<div>
<label for="terminalnumbertext">Terminal ID:</label>
</div>
</td>
<td>
<div >
<input id="terminalidtext" name="terminalid" data-bind="value:Terminal_ID" required />
<span class="k-invalid-msg" data-for="terminalidtext"></span>
</div>
</td>
</tr>
<tr>
<td>
<div>
<label for="manufacturertext">Manufacture:</label>
</div>
</td>
<td>
<div>
<input id="manufacturertext" name="manufacturer" data-bind="value:VendorName" required/>
<span class="k-invalid-msg" data-for="manufacturertext" />
</div>
</td>
<td>
<div>
<label for="modeltext">Model: </label>
</div>
</td>
<td>
<div>
<input id="modeltext" name="model" data-bind="value:ModelName" />
<span class="k-invalid-msg" data-for="modeltext" />
</div>
</td>
</tr>
<tr>
<td>
<div>
<label for="acquisitiontext">Ownership:</label>
</div>
</td>
<td>
<div>
<input id="acquisitiontext" name="acquisition" data-bind="value:AcquisitionDescription" />
<span class="k-invalid-msg" data-for="acquisitiontext" />
</div>
</td>
<td>
<div>
<label for="costcentertext">CostCenter:</label>
</div>
</td>
<td>
<div>
<input id="costcentertext" name="costcenter" data-bind="value:CostCenter" />
<span class="k-invalid-msg" data-for="costcentertext" />
</div>
</td>
</tr>
<tr>
<td>
<div>
<label for="lifecyclestatustext">Lifecycle Status:</label>
</div>
</td>
<td>
<div>
<input id="lifecyclestatustext" name="lifecyclestatus" data-bind="value:LifecycleDescription" />
<span class="k-invalid-msg" data-for="lifecyclestatustext" />
</div>
</td>
<td>
<div>
<label for="statuscodetext">Status Code:</label>
</div>
</td>
<td>
<div>
<input id="statuscodetext" name="statuscode" data-bind="value:StatusCode" />
<span class="k-invalid-msg" data-for="statuscodetext" />
</div>
</td>
</tr>
<tr>
<td colspan="2"> </td>
<td>
<label for="onnetworkcheck">On Network:</label>
</td>
<td>
<div>
<input type="checkbox" id="onnetworkcheck" disabled name="onnetwork" #if(OnNetwork) { #checked="checked"#}# data-bind="value:OnNetwork" />
</div>
</td>
</tr>
<tr>
<td colspan="4" style="border: solid 1px black; ">
<table class="auto-style2" cellpadding="1">
<tr>
<td width="95px">
<div>
<label for="sitecodetext2">Site Code:</label>
</div>
</td>
<td>
<div >
<input id="sitecodetext2" name="sitecode" data-bind="value:SiteCode" />
<span class="k-invalid-msg" data-for="sitecodetext2" />
</div>
</td>
<td>
</td>
</tr>
<tr>
<td width="95px">
<div >
<label for="locationtext">Location:</label>
</div>
</td>
<td>
<div>
<input id="locationtext" name="location" data-bind="value:LocationName" />
<span class="k-invalid-msg" data-for="locationtext" />
</div>
</td>
</tr>
<tr>
<td >
<div>
<label for="addresstext">Address:</label>
</div>
</td>
<td width="175px">
<div >
<input id="addresstext" name="address" data-bind="value:Address" />
<span class="k-invalid-msg" data-for="addresstext" />
</div>
</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<td>
<div >
<label for="citytext">City:</label>
</div>
</td>
<td width="150px">
<div >
<input id="citytext" name="city" data-bind="value:City" />
<span class="k-invalid-msg" data-for="citytext" />
</div>
</td>
<td>
<div >
<label for="statetext">State:</label>
</div>
</td>
<td width="40">
<div>
<input id="statetext" name="state" data-bind="value:State" />
<span class="k-invalid-msg" data-for="statetext" />
</div>
</td>
<td>
<div>
<label for="zipcodetext">ZipCode:</label>
</div>
</td>
<td>
<div>
<input id="zipcodetext" name="zipcode" data-bind="value:ZipCode" />
<span class="k-invalid-msg" data-for="zipcodetext" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</script>
<script>
function dataSource_error(e) {
alert(e.status); // displays "error"
}
</script>
<script>
function initDropDownLists() {
var categories = $("#manufacturertext").kendoDropDownList({
height:"25px",
optionLabel: "Select Type...",
dataTextField: "VendorName",
dataValueField: "Vendor_Key",
dataSource: {
serverFiltering: true,
type: "odata",
transport: {
read: "/Home/GetVendors",
type:"get",
dataType:"json"
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data['odata.count'];
},
},
}
}).data("kendoDropDownList");
categories.dataSource.bind("error", dataSource_error);
var products = $("#modeltext").kendoDropDownList({
optionLabel: "Select catagory...",
dataTextField: "ModelName",
dataValueField: "Model_Key",
dataSource: {
serverFiltering: true,
type: "odata",
transport: {
read: "/Home/GetModels",
type: "get",
dataType: "json"
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data['odata.count'];
},
},
}
}).data("kendoDropDownList");
var orders = $("#acquisitiontext").kendoDropDownList({
optionLabel: "Select answer...",
dataTextField: "AcquisitionDescription",
dataValueField: "AcquisitionType_Key",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "/Home/GetAcquisitions",
type: "get",
dataType: "json"
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data['odata.count'];
},
},
}
}).data("kendoDropDownList");
var orders = $("#costcentertext").kendoDropDownList({
autoBind: false,
optionLabel: "Select cost center...",
dataTextField: "CostCenter",
dataValueField: "CostCenter_Key",
dataSource: {
serverFiltering: true,
type: "odata",
transport: {
read: "/Home/GetCostCenter",
type: "get",
dataType: "json"
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data['odata.count'];
},
},
}
}).data("kendoDropDownList");
var orders = $("#lifecyclestatustext").kendoDropDownList({
autoBind: false,
optionLabel: "Select cost center...",
dataTextField: "LifecycleDescription",
dataValueField: "LifecycleStatus_Key",
dataSource: {
serverFiltering: true,
type: "odata",
transport: {
read: "/Home/GetLifecycleStatus",
type: "get",
dataType: "json"
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data['odata.count'];
},
},
}
}).data("kendoDropDownList");
var orders = $("#statuscodetext").kendoDropDownList({
autoBind: false,
optionLabel: "Select cost center...",
dataTextField: "StatusCode",
dataValueField: "StatusCode_Key",
dataSource: {
serverFiltering: true,
type: "odata",
transport: {
read: "/Home/GetStatusCodes",
type: "get",
dataType: "json"
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data['odata.count'];
},
},
}
}).data("kendoDropDownList");
}
</script>
Thank you
1 Answer, 1 is accepted
Hello Daniel,
What I see from the configuration of the Kendo DropDownList and the DataSource setup is that there is some Schema configuration that configures the DataSource to look for the data items via the value field and the total from 'odata.count' field. From the response example I do not see these to be fetched.
Also, make sure that the DataSource is configured properly for the type of the services consumed. The type and dataType fields should be part of the trasport.read configuration option. Like so:
...transport: { read: { url: "/Home/GetVendors", type:"get", dataType:"json" }},...Also, the error you get indicates that the callback from the JSON request was not called. You can read more about the specific error here: https://stackoverflow.com/questions/14255502/error-jquery-was-not-called.
Generally, from the stack trace, I see that the error is thrown before the data being processed by the DataSource or the DropDownList.
Here you are also a demo with the DropDownList tied up to an Odata service that works well with the recent Kendo UI version: http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering.
Regards,Ianko
Progress Telerik