kendo grid with java.util.Date doesn't work - datetime

I have a kendo grid with data being populated using ajax request.
the model returned from the controller has a java.util.Date field called someDate and the returned data in json for that field is like
{"total":3,
"data":[
{"someDate":1433116800000,"someValue":111.00},
{"someDate":1444116800000,"someValue":222.00},
{"someDate":1455116800000,"someValue":333.00}]}
The dataSouce is as below:
"dataSource": {
"schema": {
"total":"total",
"data":"data"
},
"transport":{
"parameterMap":function parameterMap(options, operation) {
if(operation==="read"){
return JSON.stringify(options);
} else {
return JSON.stringify(options.models);
}
},
"read":{
"dataType":"json",
"contentType":"application/json",
"type":"POST",
url : "${ajaxGetData}&param="+someParam
}
}
columns in the grid is like this
"columns":
[{
"field":"someValue",
"title":"Some Value",
"type":"numeric"
},{
"field":"someDate",
"title":"Date",
"type":"date",
format:"{0:yyyy-MM-dd hh:mm:ss tt}"
}
The issue is that the date and time is not displayed properly. If I use a template, I have to remove the "type":"date" for it to work however the filters don't work properly.
template:'#= kendo.toString( new Date(someDate), "yyyy/MM/dd hh:mm:ss tt") #'
How to show Date in a specific format "yyyy/MM/dd hh:mm:ss tt".
This JS Fiddle might help (but doesn't have the exact json structure with data and total)

Would it be possible to use ISO 8601 format for you dates, if that's possible the type date in the model definition should work (if you're using GSON library take a look here)
edit
According to the comments you can make use of the schema.parse, a sample of this using your provided fiddle will look like this:
var grid = $("#grid").kendoGrid({
dataSource: {
data: createRandomData(10),
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
},
parse: function(response) {
var products = [];
for (var i = 0; i < response.length; i++) {
response[i].BirthDate = new Date(response[i].BirthDate);
}
return response;
}
},
pageSize: 10
},
height: 500,
scrollable: true,
sortable: true,
selectable: true,
change:onChangeSelection,
filterable: true,
pageable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{
field: "City"
},
{
field: "Title"
},
{
field: "BirthDate",
title: "Birth Date",
//template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
},
{
field: "Age"
}
]
}).data("kendoGrid");
I hope it works.

Related

How to use url: instead of data: for onExpandRow function?

I followed the example for onExpandRow, however I can't figure out how to use the row information that is passed with a url for my table instead of the data tag. Currently it just replicates my whole table in the expand function, not just the rows data. Probably a simple fix but I am missing it.
onExpandRow: function (index, row, $detail) {
console.log(row)
$detail.html('<table></table>').find('table').bootstrapTable({
url: 'table.php',
columns:[{
field: 'mfr_name',
title: 'manufacturer'},
{field: 'phone_number',
title: 'phone'},
],
})
The example has the data saved in a variable and uses the data: call instead of the url: one.
var data = [{
'col1': '1.1',
'col2': '1.2',
'nested': [{
'col3': '1.3',
'col4': '1.4',
'col5': '1.5'
}]
onExpandRow: function(index, row, $detail) {
console.log(row)
$detail.html('<table></table>').find('table').bootstrapTable({
clickToSelect: true,
columns: [{
field: 'select',
checkbox: true
}, {
field: 'col3',
title: 'Col3'
}, {
field: 'col4',
title: 'Col4'
}, {
field: 'col5',
title: 'Col5'
}],
data: row.nested,
Did you mean something like this:
http://jsfiddle.net/eitanmg/m41ok0ue/12/
The main change is when expanding the row, it will make AJAX call to get the data you want from remote resource and not from local variable.
$(function () {
$('#table').bootstrapTable({
data: data,
detailView:true,
onExpandRow: function (index, row, $detail) {
$detail.html('Loading request...');
$.ajax({
type: "GET",
url: "/your_custom_url_that_contains_the_data",
success: function (result) {
$detail.html('<table></table>').find('table').bootstrapTable({
columns: [{
field: 'select',
checkbox: true
}, {
field: 'col1',
title: 'Col1'
}, {
field: 'col2',
title: 'Col2'
}, {
field: 'col3',
title: 'Col3'
}],
data: JSON.parse(result),
});
}
});
}
});
});

ASP.NET WebAPI KendoUI, can't update, create, delete data, 405 Method not allowed

I'm using ASP.NET WebApi in conjunction with KendoUI. Json is successfully displayed in the grid, so GET works. But I can't UPDATE, CREATE or DELETE data. Any idea what I am missing? Even in the Telerik forum I couldn't find anything that points me into the right direction. And I also looked through their examples. Must I somehow pass values to PUT, POST, and DELETE?
<script type="text/javascript">
var remoteDataSource = new kendo.data.DataSource({
transport: {
read: { url: '/api/NorthwindProductWebApi', dataType: "json", type: "GET" },
update: { url: '/api/NorthwindProductWebApi', dataType: "json", type: "PUT"},
create: { url: '/api/NorthwindProductWebApi', dataType: "json", type: "POST" },
destroy: { url: '/api/NorthwindProductWebApi', dataType: "json", type: "DELETE" },
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) }
;
}
}
},
pageSize: 20,
batch: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: "number" },
ProductName: { type: "string" },
SupplierID: { type: "number" },
CategoryID: { type: "number" },
QuantityPerUnit: { type: "string" },
UnitPrice: { type: "string" },
UnitsInStock: { type: "number" },
UnitsOnOrder: { type: "number" },
ReorderLevel: { type: "number" },
Discontinued: { type: "string" }
}
}
}
});
$('#grid').kendoGrid({
dataSource: remoteDataSource,
heigth: 100,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
toolbar: ["create"],
columns: [{
command: ["edit", "destroy"], title: " ", width: "200px"
},
{
field: "ProductID",
title: "ProductID",
width: 200
}, {
field: "ProductName",
title: "ProductName",
width: 250
}, {
field: "SupplierID",
title: "SupplierID",
width: 200
}, {
field: "CategoryID",
title: "CategoryID",
width: 200
}, {
field: "QuantityPerUnit",
title: "QuantityPerUnit",
width: 200
}, {
field: "UnitPrice",
title: "UnitPrice",
width: 250
}, {
field: "UnitsInStock",
title: "UnitsInStock",
width: 200
}, {
field: "UnitsOnOrder",
title: "UnitsOnOrder",
width: 250
}, {
field: "ReorderLevel",
title: "ReorderLevel",
width: 200
}, {
field: "Discontinued",
title: "Discontinued",
width: 250
}],
editable: "popup",
save: function(){
this.refresh();
},
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "beginnt mit",
eq: "exakt",
neq: "enthält nicht"
},
number: {
//???contains: "contains",
eq: "exakt",
//???doesnotcontain: "Is not equal to"
}
},
}
});
</script>
Update:
Chrome gives me a 405 Method not allowed method on PUT and a 500 (Internal Server Error) on POST. Here is a snippet from the scaffold WebApi Controller and the chrome output, which is the same for both errors:
POST http://localhost:123/api/NorthwindProductWebApi 500 (Internal Server Error) jquery-1.10.2.js:8720
send jquery-1.10.2.js:8720
jQuery.extend.ajax jquery-1.10.2.js:8150
ct.extend.create kendo.all.min.js:11
(anonymous function) kendo.all.min.js:11
jQuery.extend.Deferred jquery-1.10.2.js:3274
lt.extend._promise kendo.all.min.js:11
lt.extend._send kendo.all.min.js:11
lt.extend.sync kendo.all.min.js:11
j.extend.saveRow kendo.all.min.js:23
(anonymous function) kendo.all.min.js:22
jQuery.event.dispatch jquery-1.10.2.js:5109
elemData.handle jquery-1.10.2.js:4780
// POST api/NorthwindProductWebApi
[ResponseType(typeof(Product))]
public IHttpActionResult PostProduct(Product product)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.Products.Add(product);
db.SaveChanges();
return CreatedAtRoute("DefaultApi", new { id = product.ProductID }, product);
}
Attempt to change the Url in the DataSource:
create: {
url: function(options) {
return '/api/NorthwindProductWebApi/PostProduct' + options.ProductID
},
type: "POST",
dataType: "json"
Normally you decorate your controller with
[HttpGet]
[HttpPost]
If you decided to use full set of REST request methods ,Get,Put,Delete,Post then you must handle them by decorating on the controller method to tell the compiler which method will be processing which type of request.
[HttpGet]
public ActionResult HelloWorld()
{}
[HttpPost]
public ActionResult HelloWorld(Model model)
{}
[HttpPut]
public ActionResult HelloWorld(Model model)
{}
[HttpDelete]
public ActionResult HelloWorld(int Id)
{}
For more information Link: PUT vs POST in REST
Ok, so, your controller is named NorthwindProductWebApiController and your POST method in the controller is named PostProduct. The solution is one of two choices. You can either rename PostProduct to Post - removing the Product part in the name, or change the url in your Kendo DataSource create definition to api/NorthwindProductWebApi/PostProduct.
Remember that ASP.NET WebApi is based on convention. You do not have to fully name your controller methods. Typically, the HTTP verb is sufficient. It knows which method to call based on the verb and number of arguments. If you do however fully name the method, you must fully name it in the URL.

ExtJS4.2 Grid Filter Leaves empty Rows with Paging - NewbieQ

I have tried various ways to refresh the grid but everything I try doesn't work. Do I refresh the Grid or do I load the store??? You can see that the paging tool bar is still showing 50 pages after the filtering. If there are no dates on a given pag and it is empty then it will disable the tool bar and paging doesn't work after that page un less you refresh the browser and skip over the empty page. So, in my case page 15 has no rows so it breaks when u hit next and get that page. If you type in the page number 16 then all is good until you hit another's empty page.
My datepicker is in my viewport below and I have tried refreshing the gird and loading the store as well as other things which mostly result in undefined error. Not sure where to start with this one so I will show my code and screen shots below:
BEFORE DATE SELECTION:
AFTER DATE SELECTION:
STORE:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
type: 'ajax',
//extraParams :{limit:1000},
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset',
remoteFilter : true
},
listeners:
{
// stuff goes here maybe??
}
}
});
GRID PANEL:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
//buffered: true,
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 2})],
dockedItems: [{ xtype: 'pagingtoolbar',
store: 'Users',
dock: 'bottom',
displayMsg: 'Displaying Records {0} - {1} of {2}',
displayInfo: true}],
initComponent: function() {
this.columns = [
Ext.create('Ext.grid.RowNumberer',
{
resizable: true,
resizeHandles:'all',
align: 'center',
minWidth: 35,
maxWidth:50
}),
{
header: 'Name',
dataIndex: 'message_id',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Email',
dataIndex: 'recip_email',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Date Time',
dataIndex: 'unix_time_stamp',
width: 120,
menuDisabled:true,
// submitFormat: 'd/m/Y',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'm/d/y'}) }
}];
this.callParent(arguments);
},
});
VIEWPORT:
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
itemId:'centerPanelRegion',
title:'The Title',
xtype: 'tabpanel',
hidden: true,
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
itemId:'westPanelRegion',
hidden: true,
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
//store.load();
//store.sync();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
CONTROLLER:
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores:['Users', 'dates'],
models:['User', 'date'],
views: ['user.List','user.Edit'],
init: function() {
Ext.getStore('dates').addListener('load',this.ondatesStoreLoad, this);
this.control(
{
'viewport > userlist':
{
itemdblclick: this.editUser,
},
'useredit button[action=save]':
{
click: this.updateUser
}
});
},
// ---------- handler Function declarations -------------
ondatesStoreLoad: function(me,records,success)
{
// ------ Gets the dates from dates store and loads an array
var store = this.getStore('dates');
sendDataArray = [];
store.each(function(record){
var recordArray = [record.get("unix_time_stamp")];
sendDataArray.push(recordArray);
});
// ------ Set DatePicker Bullshit right fucking here --------//
var dtFld = Ext.ComponentQuery.query('#datePickerFld')[0];
dtFld.setDisabledDates(["^(?!"+sendDataArray.join("|")+").*$"]);
dtFld.setMaxDate(new Date());
dtFld.setMinDate(new Date('05/01/2013'));
var wstPnlReg = Ext.ComponentQuery.query('#westPanelRegion')[0];
wstPnlReg.show();
var ctrPnlReg = Ext.ComponentQuery.query('#centerPanelRegion')[0];
ctrPnlReg.show();
// var grid = Ext.widget('userlist');
},
onUsersStoreDataChange: function(me)
{
//console.log('Hey the store data just changed!');
},
editUser: function(grid, record)
{
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button)
{
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();
},
});
UPDATED VIEWPORT: Changes made only in datepicker handler
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
itemId:'centerPanelRegion',
title:'The Title',
xtype: 'tabpanel',
hidden: true,
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
itemId:'westPanelRegion',
hidden: true,
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y'));
// Load the store
store.load();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
This line is likely causing the issues.
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
I'm not sure why you are calling Ext.encode on whatever store.filter returns, but I don't think you want to do that (and it is likely causing the undefined errors).
As for the paging toolbar not updating the current count, it is likely you just aren't returning the correct information in your server response when updating the store. The server response should include the total number of records. According to the docs for Ext.toolbar.Paging, http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.toolbar.Paging:
The packet sent back from the server would have this form:
{
"success": true,
"results": 2000,
"rows": [ // ***Note:** this must be an Array
{ "id": 1, "name": "Bill", "occupation": "Gardener" },
{ "id": 2, "name": "Ben", "occupation": "Horticulturalist" },
...
{ "id": 25, "name": "Sue", "occupation": "Botanist" }
]
}

After edit of Grid cell, the value is overlapped with a zero

When I edit a cell in my grid, a zero ("0") is placed in the cell, overlapping the cell value. This zero does not show when the grid loads, and it does not save to the database when the update happens. If I navigate away and come back, the zero is gone. It only happens if I edit the cell; if I only click in the cell and initiate the inline editing, no zero appears. This happens in every cell, even the dates.
My page is an SPA.
This is the code that builds the grid:
function fnLoadStorageVaults(storageid) {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: URL_GETVAULTS,
dataType: "json",
type: "GET",
data: { StorageID: storageid }
},
update: { dataType: "json", url: URL_UPDATEVAULTS, type: "POST" },
destroy: { url: URL_DELETEVAULT, type: "POST" },
create: { url: URL_INSERTVAULT, type: "POST" },
parameterMap: function (data, type) {
return kendo.stringify(data);
}
},
autoSync: true,
schema: {
model: {
id: "StorageVaultID",
fields: {
VaultNumber: { type: "string", editable: true },
Section: { type: "string", editable: true },
Row: { type: "string", editable: true },
DateFrom: { type: "date", editable: true },
DateTo: { type: "date", editable: true },
WarehouseID: { type: "number", editable: true }
}
}
}
});
$("#VaultGrid").kendoGrid({
dataSource: ds
, sortable: true
, editable: true
, navigable: true
, columns: [
{ field: "WarehouseID", title: "Warehouse", width: "60px" }
,{ field: "VaultNumber", title: "Vault Nbr.", width: "60px" }
, { field: "Section", title: "Section" }
, { field: "Row", title: "Row" }
, { field: "DateFrom", title: "Date In" }
, { field: "DateTo", title: "Date Out" }
]
});
}
My apologies, the update was not working after all. The zero was the response from the server. Still curious behavior though.

kendogrid batch edit appending row causes to post data

This code populates datagrid with json formated data received from /api/notes/ by tornado app...
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
pageSize: 10,
autoSync: true,
transport: {
read: {
url: '/api/notes/',
dataType: 'json',
type: 'GET'
},
create: {
url: '/api/notes/',
dataType: 'json',
type: 'POST'
},
update: {
url: '/api/notes/',
dataType: 'json',
type: 'PUT'
}
},
schema: {
data: function(reply) { return reply.rows; },
model: {
id: "id",
fields: {
id: { type: "string" },
name: { type: "string" },
author: { type: "string" },
}
}
},
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 300,
editable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "id", title: "ID", width: 150 },
{ field: "name", title: "Book", width: 150 },
{ field: "author", title: "Author", width: 100 },
{ command: "destroy", title: " ", width: 110 }
],
});
});
if I click create instead of popping up a row, like here a post triggered with empty data parameter, what's wrong here
Try it with autoSync removed or set to false on the DataSource. According to the docs:
Enables (true) or disables (false) the automatic invocation of the sync() method for each change made.
So I think when you try to insert the row, it immediately puts it into the DataSource, causing it to do a sync(). The demo you linked to doesn't specify autoSync either.

Resources