No error but no data. Is there an option I need to add to make this work? my data uses the result from an ajax call.
Any suggestions?
Code:
$.ajax({
cache: false,
url: "http://a.co.nz/GetTestDocs",
data: '{'
+ ' "oldCompanyIdString": "' + selectOldCompanyId + '", '
+ ' "effectiveDateString": "' + selectEffectiveDate + '", '
+ ' "endDateString": "' + selectEndDate + '",'
+ ' "userToken": "' + userToken + '"'
+ ' }',
type: "POST",
//jsonpCallback: "Value",
contentType: "application/json",
dataType: "json",
error: function (jqXHR, textStatus, errprThrown) {
//console.log(errprThrown);
//window.location = location;
},
success: function (value) {
if (value.GetTestDocsResult != null) {
result = $.parseJSON(value.GetTestDocsResult);
if (result.length == 0) {
alert("Your query did not return any data.");
}
else {
console.log(result);
bindDataTable(result.DocsList);
}
}
}
});
function bindDataTable(data) {
$('#docuList').dataTable({
"processing": true,
"ajax": data,
"columns": [
{ "data": "Description" },
{ "data": "FileLocation" }]
});
}
Help pls..my first time to use dataTables
Replace "ajax": data, with "data": data,
function bindDataTable(data) {
$('#docuList').dataTable({
"processing": true,
"data": data,
"columns": [
{ "data": "Description" },
{ "data": "FileLocation" }
]
});
}
Related
When I refresh the page using filterOCPPLogRefresh() function, paging numbers are not displayed.
getOCCPLog.js:
Vestel.EVCMS.OCPPLogs.GetOCPPLogs = function (chargePointID) {
$(".k-loading-image").show();
$(document).ready(function () {
// OCPP Log Grid
filterStart = $("#start").data("kendoDateTimePicker").value();
filterEnd = $("#end").data("kendoDateTimePicker").value();
messageType = $("#dropdowntree").data("kendoDropDownTree").value();
var direction = "AllMessageDirection";
var wnd, detailsTemplate;
var messageDirection = {
'ReceivedAtGateway': Vestel.EVCMS.Common.OCPPLogsColumns.Outgoing,
'SentByGateway': Vestel.EVCMS.Common.OCPPLogsColumns.Incoming
};
$("#OCPPLogGrid").kendoGrid({
dataSource: {
transport: {
read: {
url:
Vestel.EVCMS.Common.Global.EVCApiUrl +
"api/ChargePoint/GetOCPPLogs?ChargePointID=" + chargePointID +
"&filterStart=" + filterStart.toDateString() +
" &filterEnd=" + filterEnd.toDateString() +
"&messageType=" + messageType +
"&direction=" + direction,
headers: {
"accept": "application/json;odata=verbose",
'Authorization': 'Bearer ' + Vestel.EVCMS.Common.Global.accessToken,
},
dataType: "json"
}
},
schema: {
model: {
id: "id",
fields: {
messageDate: {
type: "date",
editable: false,
},
messageID: {
editable: false,
},
messageDirection: {
editable: false,
},
messageType: {
editable: false,
},
messageDetails: {
type: "dynamic",
editable: false,
}
}
},
}
},
pageable: {
pageSize: 20,
pageSizes: [10, 20, 30, 40, 50]
},
scrollable: true,
persistSelection: true,
resizable: true,
sortable: true,
columnMenu: true,
toolbar: kendo.template($("#ocpplogtemplate").html()),
columns: [
{ selectable: true, width: "50px" },
{
field: "messageDate",
format: "{0:dd.MM.yyyy HH.mm.ss.fff}",
title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDate
},
{
field: "messageID",
title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageID
},
{
field: "messageDirection",
title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDirection,
template: function (dataItem) {
return messageDirection[kendo.htmlEncode(dataItem.messageDirection)]
}
},
{
field: "messageType",
title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageType
},
//{ field: "messageDetails", title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDetails, width: 550 },
{
command: {
text: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDetails,
click: showDetails
},
width: "200px"
}
],
editable: "popup"
});
wnd = $("#loggrid")
.kendoWindow({
title: Vestel.EVCMS.Common.OCPPLogsColumns.CustomDimensionsRaw,
modal: true,
visible: false,
resizable: false,
scrollable: true,
draggable: true,
width: '700px',
height: '200px'
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
}
Here the read, create, update and destroy functions work well. But the paging is not working.
pageSize: 20 is working. Only 20 items are showing, but the footer part is not working. I can not change to next page, the buttons are not working and the footer showing no items available.
I searched and found some similar questions, but the answers didn't work for me.
Screenshot of grid showing the problem
filterOCPPLogRefresh() function:
function filterOCPPLogRefresh(e) {
filterStart = $("#start").data("kendoDateTimePicker").value();
filterEnd = $("#end").data("kendoDateTimePicker").value();
messageType = $("#dropdowntree").data("kendoDropDownTree").value();
chargePointID = $("#chargePointID").val();
direction = $("#messageDirection").data("kendoDropDownList").value();
$.ajax({
type: "GET",
url: Vestel.EVCMS.Common.Global.EVCApiUrl +
"api/ChargePoint/GetOCPPLogs?ChargePointID=" + chargePointID +
"&filterStart=" + filterStart.toDateString() +
" &filterEnd=" + filterEnd.toDateString() +
"&messageType=" + messageType +
"&direction=" + direction,
contentType: "application/json; charset=utf-8",
headers: {
"accept": "application/json;odata=verbose",
'Authorization': 'Bearer ' + Vestel.EVCMS.Common.Global.accessToken,
},
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
if (data[i].messageDate) {
var messageDate;
var messageDateFormatted;
if (data[i].messageDate != null) {
messageDate = new Date(data[i].messageDate.toString());
messageDateFormatted =
("0" + messageDate.getDate()).slice(-2) + "." +
("0" + (messageDate.getMonth() + 1)).slice(-2) + "." +
messageDate.getFullYear() + " " +
("0" + messageDate.getHours()).slice(-2) + ":" +
("0" + messageDate.getMinutes()).slice(-2) + ":" +
("0" + messageDate.getSeconds()).slice(-2) + ":" +
("0" + messageDate.getMilliseconds()).slice(-3);
} else {
messageDateFormatted = " - ";
}
data[i].messageDate = messageDateFormatted;
}
}
$("#OCPPLogGrid").data("kendoGrid").setDataSource(data);
},
error: function (error, data) {
}
});
}
I am trying to get some data from an API and load into Datatables (datatable.net). I have completed the code as per guide and it doesn't load at all.
AJAX completes the request successfully.
Code below:
function loadTable(api) {
$.ajax({
url: api,
type: 'GET',
dataType: 'json',
"dataSrc": "",
beforeSend: function () {
console.log('\"Data collection\" query operation triggered')
$(".overlay").show(); //We are showing loading spinner here
},
headers: { Authorization: 'Basic XXXX },
success: function (data, textStatus, xhr) {
//Populate Table
$('#datatable').DataTable({
"columns": [
{ "data": "DataObjectName" },
{ "data": "SourceObject" },
{ "data": "IndnexType" },
{ "data": "ObjectType" },
{ "data": "FeedType" },
{ "data": "BusinessUnit" },
{ "data": "VersionId" },
{ "data": "Unit" },
{ "data": "Unit" },
],
"bDestroy": true
})
console.log('\"Data collection\" query operation succesfully completed');
},
error: function (xhr, textStatus, errorThrown) {
console.log('\"Data collection\" query operation failed. Error : ' + errorThrown);
showNotification('top', 'right', 'Error while performing ' + operation + '. Error : ' + errorThrown, 'danger');
},
complete: function () {
$(".overlay").hide(); //We are showing loading spinner here
console.log('\"Data collection\" query operation task completed');
}
});
}
submitForm = function (nid, title) {
var form = $('#candidature')[0];
var formData = new FormData(form)
var btn = document.querySelector('#candidature button')
formData.append('listfields', JSON.stringify(fieldsname))
formData.append('nid', nid)
formData.append('title', title)
formData.append('ntype', 'recrutement_offre')
console.log(global_json.baseUrl)
$.ajax({
url: global_json.baseUrl + "/send-form",
type: "post",
data: formData,
processData: false,
contentType: false,
dataType: "json",
beforeSend: function() {
btn.innerHTML = '<i class="fa fa-circle-o-notch fa-spin" style="font-size:12px !important"></i> Veuillez patienter...'
},
success: function (response) {
if (response.success) {
$('form#candidature').hide();
//console.log('success');
}
showMessage(response, 'candidature');
},
complete: function (response) {
btn.innerText = 'Envoyer'
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown)
//$('form#candidature').hide();
}
})
}
var fieldsname = {
"name": "field_field_name_rec",
"type": "field_field_type_rec",
"rules": "field_rules_rec",
"values": "field_values_rec"
}
$('#formModal').on('shown.bs.modal', function(event) {
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 + "'/>')
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