Kendo AutoComplete Not Displaying - kendo-ui

I have a custom editor that I use with autocomplete. The web service is getting called and returning the data. However, nothing is diaplying in the editor. I put a breakpoint in schema.parse() but it's never hit. What am I missing?
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
autoBind: false,
suggest: true,
delay: 500,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: function (opt) {
$.getJSON("/myWebService/GetData");
},
},
schema: {
errors: function (e) {
return e;
},
parse: function (data) {
return data.Name;
}
}
})
});
}
UPDATE:
The data, when shown via JSON.stringfy(data) is like this:
[{"Address":"123 1st St.","ID":"1","Name":"David"},{"Address":"234 2nd St.","ID":"2","Name":"Smith"}]
UPDATE 2:
The code looks like this now:
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
dataValueField: "Name",
autoBind: false,
suggest: true,
delay: 500,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: function (opt) {
return "/myWebServices/GetData/" + opt.filter.filters[0].value;
},
dataType: "json"
}
},
schema: {
errors: function (e) {
return e;
}
},
data: function (response) {
return $.parseJSON(response);
}
})
});
}
UPDATE 3:
Finally got it working by removing the schema and data section. Accepting OnaBai's answer since he definitely pointed me to the right direction. The final code looks like this:
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
dataValueField: "Name",
autoBind: false,
suggest: true,
delay: 500,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: function (opt) {
return "/myWebServices/GetData/" + opt.filter.filters[0].value;
},
dataType: "json"
}
}
})
});
}

The problem is the implementation of read function. This function should invoke opt.success with data that you want to return. What you are doing is retrieving data from a URL but you are not returning such data.
But in your case it seem that you don't do anything special (no need for defining a function). So you can define it as an Object and just define transport.read.url
You can use:
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url : "/myWebService/GetData"
}
},
schema: {
parse: function (data) {
return data.Name;
}
}
})
EDIT: For using the data as the server returns it and do not have to parse, you can use:
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>').appendTo(container).kendoAutoComplete({
autoBind : false,
suggest : true,
delay : 500,
dataValueField: "Name",
dataSource : new kendo.data.DataSource({
transport: {
read: {
url : "/myWebService/GetData"
}
}
})
});
}
The trick is defining dataValueField that defines which value of the returned array is the value of the autocomplete.

Related

kendo Grid custom edit send [object Object]

I want implement kendo Grid custom editor (dropdownlist).
everythin is ok but if create new record or update exists record when dropdown column is null I got error in updating, in debugging I saw
'[object Object]' sent as value of continent column ,
but when dropdown column has value I can change dropdown value and update record is OK!!!
my code is:
var crudServiceBaseUrl = "http://localhost:8090/hr";
var countryDataSource =
new kendo.data.DataSource({
transport: {
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
},
read: {
url: crudServiceBaseUrl + "/countries",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/countries/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/countries/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/countries/Create",
dataType: "jsonp"
}
},
schema : {
data : "items"
},
model: {id : "CD_CONT",
fields: {
CD_CONT : { type: "string",editable : false},
NAME_CONT : { type: "string",editable : true,nullable : false},
CONTINENT : { type: "string",editable : true,nullable : true}
}
}
});
var continentDataSource = new kendo.data.DataSource({
data: [ { continent:"1",name:"asia"},
{ continent:"2",name:"europ"},
{ continent:"3",name:"america"}
]
});
$('#grid).kendoGrid({
toolbar: ["create","save", "cancel",],
columns: [
{
field: "CD_CONT" ,
title: "Cd cont"
},
{
field: "NAME_CONT" ,
title: "Name cont"
},
{
field: "CONTINENT" ,
title: "Continent",
editor: function ContinentDropDown(container, options) {
$('<input data-text-field="name" data-value-field="continent" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: continentDataSource,
dataTextField: "name",
dataValueField: "continent"
});
}
}
],
dataSource: countryDataSource ,
editable: "inline"
});
also how to set field template to show textValue of Continent in grid?
Did you forget to add the name in your editor?
$('<input data-text-field="name" data-value-field="continent" data-bind="value:' + options.field + '" name='" + options.field + "'/>')

Kendo UI call custom service for delete

How can I call custom service for deleting a row in Kendo UI grid.This custon service should have a confirmation dialog option that can be customized.
Any thoughts on this is highly appreciative
You should customize the kendo.data.DataSource 'destroy' attribute to specify the URL and update the kendoGrid 'delete' command code for the custom confirmation.
Example code
$(document).ready(function () {
var windowTemplate = kendo.template($("#windowTemplate").html());
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
var window = $("#window").kendoWindow({
title: "Are you sure you want to delete this record?",
visible: false, //the window will not appear before its .open method is called
width: "400px",
height: "200px",
}).data("kendoWindow");
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}"},
{ field: "UnitsInStock", title:"Units In Stock"},
{ field: "Discontinued"},
{ command: [
{name: "edit"},
{name: "Delete",
click: function(e){ //add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
window.content(windowTemplate(data)); //send the row data object to the template and render it
window.open().center();
$("#yesButton").click(function(){
grid.dataSource.remove(data) //prepare a "destroy" request
grid.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
window.close();
})
$("#noButton").click(function(){
window.close();
})
}
}
]}],
editable: {
mode: "inline"
}
}).data("kendoGrid");
});
Taken from:
http://docs.telerik.com/kendo-ui/web/grid/how-to/Editing/custom-delete-confirmation-dialog
You can set the delete option in your datasource to a function and do anything you want from that point. Without a sample of your service, I can't help you getting started but I can link you to the documentation.

kendo ui grid dropdownlist cannot pass its value while adding a new record

The below case refers to:http://demos.telerik.com/kendo-ui/grid/editing-custom
The adding screen works, but the add failed because of the dropdownlist cannot get value.
The problem is: when add a new record, and then select a Curve Term (not the default value), the dropdown cannot get any value, that is, the json backend is: "curvetermid":""
The code is as below:
<div id="grid"/>
var dataSource = new kendo.data.DataSource ({
batch:true,
transport:{
read: function (options) {
$.ajax({
type: "POST",
url:"",
data:"/idx/list",
dataType:"json",
contentType: "application/json; charset=utf-8",
success: function(result) {
options.success(result);
}
})
},
create: function(options) {
$.ajax({
type: "POST"
,url:"/create"
,dataType:"json"
,contentType: "application/json; charset=utf-8"
,data:kendo.stringify(options.data.models)
,success:function(result) {
options.success(result);
}
});
},
parameterMap:function(options,operation) {
return kendo.stringify(options.models);
}
},
schema:{
data: result.data,
total:result.total,
model:{
id:idKey,
fields:{
idKey: {type:"number"},
**curveterm: {validation: {required: true}}**
}
}
}
});
$("#grid").kendoGrid({
dataSource:dataSource,
columns: [
{field: "idKey", title: "ID"},
**{field: "curvetermid",
title: "Curve Term",
editor: fnDdlCurvetermEditor,
template: "#=curveterm.curvetermname#"}
]**,
editable:{mode:"popup", confirmation:"Are you sure you want to remove this item?"}
});
function fnDdlCurvetermEditor(container,options) {
var data = [{"curvetermid":0,"curvetermname":"NA","isactive":1}, {"curvetermid":1,"curvetermname":"AAA","isactive":1},{"curvetermid":2,"curvetermname":"BBB","isactive":1}];
var ddlVar = $('<input id="curvetermid" name="curvetermid" '
+ ' data-value-field="curvetermid" '
+ ' data-text-field="curvetermname"'
+ ' data-bind="value: ' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "curvetermid",
dataValueField: "curvetermname",
dataSource: data
});
}

Oracle chokes on date format sent from Kendo DataSource

I have a DataSource which passes Odata to Teiid and then on to Oracle. However, Oracle is choking when I try to pass it a date from a Kendo DataSource. I think it's because Oracle does not recognize a date string of the format it sends - for instance, 2014-07-01T05:00:00.000Z - as valid. Here's the error I get:
avax.persistence.RollbackException: Exception [EclipseLink-4002] (Eclipse Persistence Services - 2.4.1.v20121003-ad44345): org.eclipse.persistence.exceptions.DatabaseException
Internal Exception: org.teiid.jdbc.TeiidSQLException: TEIID30504 JTRAC_DEV_ENV: 1843 TEIID11013:TEIID11004 Error executing statement(s): [Prepared Values: ['2014-07-01T05:00:00.000Z', 700281, 700280] SQL: UPDATE "JTRAC"."MAPPED_HISTORY" SET "TIME_STAMP" = ? WHERE "JTRAC"."MAPPED_HISTORY"."HISTORY_ID" = ? AND "JTRAC"."MAPPED_HISTORY"."ITEM_ID" = ?]
Error Code: 1843
Call: UPDATE "JTRAC.MAPPED_HISTORY" SET "TIME_STAMP" = ? WHERE ((("HISTORY_ID" = ?) AND ("ITEM_ID" = ?)) AND ("TEIID_MULTI_DATA_SOURCE_COLUMN" = ?))
bind => [2014-07-01T05:00:00.000Z, 700281, 700280, JTRAC_DEV_ENV]
How do I change the timestamp into something that will work? I've tried intercepting it with both parameterMap (doesn't seem to convert it yet by that stage - still fairly normal time format), requestStart (I can't seem to access the data to tamper with it) and parse (isn't working the way I expect it to). For the record, there's an INSTEAD OF Oracle trigger on the other end because ultimately I am updating a view. Thoughts?
Here's the trigger I'm using:
create or replace
trigger update_mapped_history
INSTEAD OF UPDATE ON mapped_history
FOR EACH ROW
DECLARE
new_status_id number;
new_assigned_to number;
new_logged_by number;
new_timestamp timestamp;
cmmd VARCHAR2(100);
BEGIN
cmmd:='alter session set NLS_TIMESTAMP_FORMAT=''YYYY-MM-DD"T"HH:MI:SS.FF"Z"''';
EXECUTE IMMEDIATE cmmd;
SELECT status_id INTO new_status_id FROM status_int_mapping WHERE status_label=:NEW.status AND space_id = (select i.space_id from items i where i.id = :OLD.item_id);
SELECT id INTO new_assigned_to FROM users WHERE login_name = :NEW.assigned_to;
SELECT id INTO new_logged_by FROM users WHERE login_name = :NEW.logged_by;
select FROM_TZ(TO_TIMESTAMP(:NEW.time_stamp, 'YYYY-MM-DD"T"HH:MI:SS.FF"Z"'),'UTC') at time zone 'US/Central' into new_timestamp from dual;
UPDATE history SET
logged_by = new_logged_by,
status = new_status_id,
assigned_to = new_assigned_to,
jt_comment = :NEW.jt_comment,
time_stamp = new_timestamp
WHERE id=:OLD.history_id;
END;
Here's my code in all its glory.
historyDataSource = new kendo.data.DataSource({
//autoSync: true,
type: "odata",
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 10,
transport: {
read: {
url: baseUrl + "MAPPED_HISTORY",
type: "GET",
headers: {
Authorization: authorizationStr64
},
dataType: "json"
},
update: {
url: function(options){
return kendo.format(baseUrl + "MAPPED_HISTORY"+"({0})", options.HISTORY_ID);
},
type: "PUT",
headers: {
Authorization: authorizationStr64
},
dataType: "json",
contentType: "application/json"
},
create: {
url: baseUrl + "MAPPED_HISTORY",
type: "POST",
headers: {
Authorization: authorizationStr64
},
dataType: "json"
},
destroy: {
//url: "http://amr-dsiprod05:8080/odata/SDA/TEIID_TEST",
url: function(options){
return kendo.format(baseUrl + "MAPPED_HISTORY"+"({0})", options.HISTORY_ID);
},
type: "DELETE",
headers: {
Authorization: authorizationStr64
},
dataType: "json"
},
parameterMap: function(data,type){
if(type=='update'){
debugger;
}
return data;
}
},
// Enable server filtering so we don't have to download the whole history data set
serverFiltering: true,
filter: { logic: "and", filters: [ { field: "HISTORY_ID", operator: "equals", value: historyId } ] },
"schema": {
"model": {
"id": "HISTORY_ID",
"fields": {
/*"HISTORY_ID": {
"editable": true,
"nullable": false
},
"ITEM_ID": {
"editable": true,
"nullable": true
},*/
"LOGGED_BY": {
"editable": false,
"nullable": true
},
"STATUS": {
"editable": false,
"nullable": false
},
"ASSIGNED_TO": {
"editable": false,
"nullable": true
},
"JT_COMMENT": {
"editable": true,
"nullable": true
},
"TIME_STAMP": {
"editable": true,
"nullable": false
}
}
},
errors: "error"/*,
parse:function (response) {
$.each(response, function (idx, elem) {
if (elem.Date && typeof elem.Date === "string") {
elem.Date = kendo.parseDate(elem.Date, "yyyy-MM-ddTHH:mm:ss.fffZ");
console.log(elem.Date);
debugger;
}
});
return response;
}*/
},
error: function(e){
if(confirm("Could not update or display data! Show full error report?")){
var myWindow = window.open("", "MsgWindow", "width=1000, height=800,resizable=yes, ");
myWindow.document.write(e.xhr.responseText);
}
//console.log();
},
/*requestStart: function(e){
if(e.type=='update'){
debugger;
}
},
requestEnd: function(e){
if(e.type=='update'){
debugger;
for(var i=0; i<e.response.d.results.length; i++){
var timeStamp = kendo.parseDate(e.response.d.results[i].time_stamp);
var utcTimeStamp = new Date(timeStamp.getTime() + timeStamp.getTimezoneOffset() * 60000);
e.response.d.results[i].OrderDate = utcTimeStamp;
alert(utcTimeStamp);
}
debugger;//alert('updating kendo!');
}
}*/
});
historyDataSource.read();
$("#" + divId).kendoGrid({
"dataSource": historyDataSource,
"autoBind": false,
"pageable": true,
"height": 350,
"selectable": true,
"editable": true,
"toolbar": [/*"create",*/"save","cancel"],
"columns": [
//{ "field": "HISTORY_ID", "width":"100px" },
//{ "field": "ITEM_ID", "width":"100px" },
{ "field": "LOGGED_BY", "width":"160px", editor: usersDropDownEditor, template: "#=LOGGED_BY#" },
{ "field": "STATUS", "width":"200px" , editor: statusDropDownEditor, template: "#=STATUS#" },
{ "field": "ASSIGNED_TO", "width":"160px", editor: usersDropDownEditor, template: "#=ASSIGNED_TO#" },
{ "field": "JT_COMMENT"},
{ "field": "TIME_STAMP", "width":"200px", format: "{0:MM/dd/yyyy hh:mm tt}", editor: dateTimeEditor }//,
//{ "command": "destroy" }
]
});
function dateTimeEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDateTimePicker({
interval: 05,
min: new Date(2011, 0, 1),
timeFormat: "HH:mm"
/*parseFormats: ["yyyy-MM-dd hh:mm:ss"]*/
});
}
function statusDropDownEditor(container, options) {
var statusInput = $('<input required data-text-field="STATUS_LABEL" data-value-field="STATUS_LABEL" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: {
url: baseUrl + "STATUS_INT_MAPPING",
type: "GET",
headers: {
Authorization: authorizationStr64
},
dataType: "json"
}
},
serverFiltering: true,
filter: { logic: "and", filters: [ {field: "SPACE_ID", operator: "equals", value: spaceId}]}
}
});
}
function usersDropDownEditor(container, options) {
var usersInput= $('<input required data-text-field="LOGIN_NAME" data-value-field="LOGIN_NAME" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: {
url: baseUrl + "SPACE_LOGIN_NAMES",
type: "GET",
headers: {
Authorization: authorizationStr64
},
dataType: "json"
}
},
serverFiltering: true,
filter: { logic: "and", filters: [ {field: "SPACE_ID", operator: "equals", value: spaceId}]}
}
});
}
});
Either use an explicit TO_TIMESTAMP() function, or set the NLS_TIMESTAMP_FORMAT in the client.
More info can be found here:
TO_TIMESTAMP() function
http://docs.oracle.com/cd/E16655_01/server.121/e17209/functions223.htm#SQLRF06142
NLS_TIMESTAMP_FORMAT
http://docs.oracle.com/cd/E16655_01/server.121/e17615/refrn10131.htm#REFRN10131

Kendo Grid groupping

I read this topic and use open source edition of kendo web, my current version is Kendo UI Web v2012.3.1114. My problem is exist as the link above and I could not solve it.
Part of my script is here:
function load() {
var grid = $("#grid").data("kendoGrid");
if (grid) {
//destroy the previous Grid instance
grid.destroy();
//clean up the html
grid.wrapper.html("");
}
var crudServiceBaseUrl = "WebForm.aspx",
//datasource = null;
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "?q=load&sql=" + $("#tbSQL").val(),
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "?q=update&sql=" + $("#tbSQL").val(),
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "?q=destroy&sql=" + $("#tbSQL").val(),
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "?q=create&sql=" + $("#tbSQL").val(),
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: getmodel()
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
//pageable: true,
selectable: true,
//groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
height: 500,
toolbar: ["create", "save", "cancel"],
columns: getColumns(),
editable: true
});
}
Every thing is ok, but only after loading page I can only One time group by headers.
It seems that this behavior is improved in the latest version of KendoUI 2012 Q3 SP1 (v.2012.3.1315), where the grouping is working as expected. For convenience I created this sample.

Resources