I am trying to get a jqgrid populated with JSON data returned from the server.
Below is my jqgrid configuration code -
$(document).ready(function(){
jQuery("#list4").jqGrid({
jsonReader : {
repeatitems: false,
id: "0"
},
url:'/data/scans',
datatype:'json',
colNames:['Scan ID','Scanned Machine', 'Begin Time', 'End Time'],
colModel:[
{name:'scanId',index:'scanId', width:100, jsonmap:"scanId"},
{name:'scannedMachine',index:'scannedMachine', width:150, jsonmap:"scannedMachine"},
{name:'beginTime',index:'beginTime', width:180,jsonmap:"beginTime"},
{name:'endTime',index:'endTime', width:180,jsonmap:"scanId"}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager4',
sortname: 'scanId',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"
});
jQuery("#list4").jqGrid('navGrid','#pager4',{edit:false,add:false,del:false});
The JSON data returned from server looks like this -
{ total: '1',
page: '1',
records: '2',
rows:[
{scanId:"123", scannedMachine:"Axbhad", beginTime:"Fri Apr 13 13:02:52 IST 2018", endTime:"Fri Apr 13 13:02:52 IST 2018"},
{scanId:"123", scannedMachine:"Axbhad", beginTime:"Fri Apr 13 13:02:52 IST 2018", endTime:"Fri Apr 13 13:02:52 IST 2018"}]}
but the html page is always displaying an empty grid like this -
Can someone please point out what is it that I am not doing correct.
I have got it working. All I did is correctly punctuated the JSON string.
Now it looks like this -
{ "total": "1", "page": "1", "records": "2", "rows":[ {"scanId":"123", "scannedMachine":"Axbhad", "beginTime":"Fri Apr 13 17:17:30 IST 2018", "endTime":"Fri Apr 13 17:17:30 IST 2018"}, {"scanId":"124", "scannedMachine":"Axbhad", "beginTime":"Fri Apr 13 17:17:30 IST 2018", "endTime":"Fri Apr 13 17:17:30 IST 2018"}]}.
To avoid making such silly mistake, I have used GSON libabry as below -
#Override
public String toString() {
return new Gson().toJson(this);
}
Related
This is my ajax response and I want to display the output part of the response in the data table
[{
"args":{},
"output":"[
test{Id='1', StartTime=Fri Mar 05, EndTime=Fri Mar 05 , servers=null},
test{Id='2', StartTime=Fri Mar 05, EndTime=Sat Mar 06 , servers=null}
]",
"transactionContext":"test",
"IDWithContextChain":"test"
}]
My js code is :
$(document).ready(function() {
$('#Table').DataTable( {
"ajax": {
url: "testurl",
dataSrc:"output"
},
"columns": [
{ data: "Id" },
{ data: "StartTime" },
{ data: "EndTime" }
]
} );
} );
I am trying to populate my data table with data I have populated with codeigniter..
Here is the object am getting
[{"checkbox":"<input type='checkbox' name='chk[]' id='expense_'185' value='185'\/>","expense_id":"185","category":"Others","description":"Payment Of Service For Sep $ October 2018","amount":"ksh.2,000","name":"Caroline Zachaeus","date":"27 Nov 2018"}, {"checkbox":"<input type='checkbox' name='chk[]' id='expense_'185' value='185'\/>","expense_id":"185","category":"Others","description":"Payment Of Service For Sep $ October 2018","amount":"ksh.2,000","name":"Caroline Zachaeus","date":"27 Nov 2018"}]
When am rendering, it says
TypeError: data is undefined
Here is my ajax code
var table = $("#datatable").DataTable({
"columnDefs" : [{"targets" : [ 7,0] , "orderable" : false},
{"targets" : [1], "visible": false},
],
"fixedHeader": true,
"aLengthMenu": [[25, 50, 100, 200, -1], [25, 50, 100, 200, "All"]],
"iDisplayLength": 25,
"order": [],
'processing': true,
'serverSide': true,
'serverMethod': 'get',
'ajax': {
'url':'<?=base_url()?>index.php/expenses/data'
},
"columns" : [
"checkbox",
"expense_id",
"category",
"description",
"amount",
"name",
"date",
"action",
],
})
Here is my page screenshot
where is your controller function
i think you are posting data from controller json type
and you have to set ajax datatype:'json'
then it will work for you
I have seen this on "Wannes" comment and it´s exactly what it´s happening to me, but i don´t know how to resolve it because i don´t understand the problem. What i have is a simple grid working with CRUD.
The grid is a client table, whenever one wants to add a new client, he hits the new button and a popover appears. In this popover there are many fields, two of them are:
DataCriacao (the date when the client was created)
DataUpdate (the date when the client was updated)
This is my grid initialization code:
var dataSource = new kendo.data.DataSource({
transport:
{
read:
{
url: "data/clientes.php",
},
update:
{
url: "data/clientes.php?type=update",
type:"POST",
complete: function (e)
{
$("#gridClientes").data("kendoGrid").dataSource.read();
}
},
destroy:
{
url: "data/clientes.php?type=destroy",
type: "POST"
},
create:
{
url: "data/clientes.php?type=create",
type: "POST",
complete: function (e)
{
$("#gridClientes").data("kendoGrid").dataSource.read();
}
},
parameterMap: function(options, operation)
{
if (operation !== "read" && options.models)
{
return {models: kendo.stringify(options.models)};
}
}
},
error:function(e)
{
console.log(e);
},
batch: true,
pageSize: 8,
schema:
{
data: "data",
total: function(response)
{
return $(response.data).length;
},
model:
{
id: "idCliente",
fields:
{
**(other fields here)**
NomeUtilizadorCriador: {editable: false,validation: { required: false } },
DataCriacao: {type:"date", editable: false},
NomeUtilizadorUpdate: {editable: false, validation: { required: false } },
DataUpdate: {type:"date", editable: false},
}
}
}
});
$("#gridClientes").kendoGrid({
dataSource: dataSource,
pageable:
{
messages:
{
display: "{0} - {1} / {2} items",
empty: "0 items",
page: "Page",
of: "of {0}", //{0} is total amount of pages
itemsPerPage: "items per page",
first: "Go to the first page",
previous: "Go to the previous page",
next: "Go to the next page",
last: "Go to the last page",
refresh: "Refresh"
}
},
serverPaging: true,
height: 550,
toolbar:[{name: "create",text: $varGridQuartosBtnNovoPT},{name: "close",text: "X"}],
columns: [
**(other fields here)**
{ field: "NomeUtilizadorCriador", title: "Criado por", hidden: true},
{ field: "DataCriacao", title: "Criado em",format:"{0:yyyy-MM-dd}", hidden: true, width: "10px"},
{ field: "NomeUtilizadorUpdate", title: "Atualizado por", hidden: true},
{ field: "DataUpdate", title: "Atualizado em",format:"{0:yyyy-MM-dd}", hidden: true, width: "10px"},
{command:[{ text: "Detalhes", click: showDetails },{ name: "edit",text:
{edit:$varGridQuartosBtnEditarPT,update:$varGridQuartosBtnActualizarPT,cancel:$varGridQuartosBtnCancelarPT}},
{ name: "destroy",text:$varGridQuartosBtnApagarPT }],title:" ",width: "30px"}],
editable: {
mode:"popup",
template:kendo.template($("#popupGridClientes").html())
}
So, for example if i wanted to create a new client today, this is what appears in those two fields:
DataCriacao: Wed Apr 22 2015 10:46:02 GMT+0100 (WEST) (creation date)
DataUpdate: Wed Apr 22 2015 10:46:02 GMT+0100 (WEST) (update date)
Now if i want to update the client information, the problem appears:
DataUpdate: Wed Apr 22 2015 00:00:00 GMT+0100 (WEST) (update date)
These two fields are type DATE on my database. I don´t know what to do because i don´t understand where to start, does this helps?.
I don't know if I understand you correctly, but as you said, you store data in database in DATE format. That's why time part is zero in your example.
Check what data is in your database. It shouldn't have time.
Problem is in your backend/database side.
I'm looking to change my array of hashes, to combine all hashes with same keys and different values into same hash, here is what I mean:
[
[0] {
"Property 1" => {
"Portal" => #<Client:0x70aa253d> {
:team_id => 1,
:cap_id => 25,
:user_id => 145,
:active => true,
:created_at => Wed, 18 Mar 2015 11:52:11 EDT -04:00,
:updated_at => Wed, 18 Mar 2015 11:52:11 EDT -04:00
}
}
},
[1] {
"Property 2" => {
"Client Solutions" => #<Client:0x70aa221c> {
:team_id => 2,
:cap_id => 25,
:user_id => 145,
:active => true,
:created_at => Wed, 18 Mar 2015 11:52:27 EDT -04:00,
:updated_at => Fri, 20 Mar 2015 12:32:52 EDT -04:00
}
}
},
[2] {
"Property 1" => {
"Other" => #<Client:0x680f8067> {
:team_id => 2,
:cap_id => 25,
:user_id => 145,
:active => true,
:created_at => Fri, 20 Mar 2015 12:52:23 EDT -04:00,
:updated_at => Fri, 20 Mar 2015 12:52:23 EDT -04:00
}
}
}
]
So after the merge the array of hashes should look like this :
[
[0] {
"Property 1" => {
"Portal" => #<Client:0x70aa253d> {
:team_id => 1,
:cap_id => 25,
:user_id => 145,
:active => true,
:created_at => Wed, 18 Mar 2015 11:52:11 EDT -04:00,
:updated_at => Wed, 18 Mar 2015 11:52:11 EDT -04:00
},
"Other" => #<Client:0x680f8067> {
:team_id => 2,
:cap_id => 25,
:user_id => 145,
:active => true,
:created_at => Fri, 20 Mar 2015 12:52:23 EDT -04:00,
:updated_at => Fri, 20 Mar 2015 12:52:23 EDT -04:00
}
}
},
[1] {
"Property 2" => {
"Client Solutions" => #<Client:0x70aa221c> {
:team_id => 2,
:cap_id => 25,
:user_id => 145,
:active => true,
:created_at => Wed, 18 Mar 2015 11:52:27 EDT -04:00,
:updated_at => Fri, 20 Mar 2015 12:32:52 EDT -04:00
}
}
}
]
I tried couple of things, looks like merge and reverse_merge are ignoring the duplicate values. Assuming result is the variable holding the array of hashes, tried this :
result.inject(:merge)
result.reduce(&:merge)
result.reduce({}, :reverse_merge)
Depending on which merge do I use reverse_merge or merge I get only 1 of the values that should be in property 1.
I get either Portal or Other in the Property, can't get both of them like described, what am I doing wrong?
The issue you're having is that merge is going to take one value per key given. You want something a little different here.
If each entry won't ever have more than one record:
result.group_by {|r| r.keys.first }.each {|k, v| v.replace(v.flat_map(&:values)) }
The general idea is that we group the entries in the initial array by the first key we find per entry (which in this case is the property ID, since it's the only key). That gives us a Hash of {property_id => [{property_id => record}, ...]}, which we convert into the proper form by replacing the values with a list of the values from each record.
I'm working on getting an AutoComplete widget to work. This code works:
var clients = [{ "ClientId": 123, "Name": "Steve" }, { "ClientId": 124, "Name": "Julie" }];
$("#client").kendoAutoComplete({
minLength: 1,
filter: "contains",
placeholder: "Type client name...",
dataTextField: "Name",
dataValueField: "ClientId",
template: kendo.template($("#template").html()),
dataSource: clients,
height: 370,
}).data("kendoAutoComplete");
However, when I try to use an actual remote dataSource, the browser displays a loading image but never shows the selected name. Here's the alternate data source:
var clients2 = new kendo.data.DataSource({
type: "jsonp",
transport: {
read: {
dataType: "jsonp",
url: "/api/clients"
}
}
});
Looking in Fiddler or Network tab in Chrome Dev Tools, the result of the api call is:
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcU3RldmVcRG9jdW1lbnRzXEdpdEh1YlxkZGQtdmV0LXNhbXBsZVxGcm9udERlc2tTb2x1dGlvblxGcm9udERlc2suV2ViXGFwaVxjbGllbnRz?=
X-Powered-By: ASP.NET
Date: Thu, 05 Sep 2013 21:08:28 GMT
Content-Length: 141
[{"ClientId":"00000000-0000-0000-0000-000000000000","Name":"Steve Smith"},{"ClientId":"00000000-0000-0000-0000-000000000000","Name":"Julie"}]
So, what's the difference and why isn't it working? The data source is clearly being used, since I can see the network calls happen with each additional character I type into the textbox.
Thanks!
Thanks to #chris_a_wagner on twitter. The culprit was me specifying jsonp for the format instead of json (I forget why I originally had that). Switching to json works.