My kendo grid is showing date like this /Date(691869600000)/ . How do i solve this?
Using this answer I got the Steve code to work for my case. Try this template:
"#= kendo.toString(new Date(parseInt(myField.substr(6))),'MM/dd/yyyy HH:mm tt')#"
'#= kendo.toString(yourDateField,"MM/dd/yyyy HH:MM tt")#'
and make your field type as date.
You need to specify the date as a type in your datasource definition - else it will just be a string:
For example if your field is birthday:
var kendoDS = new kendo.data.DataSource({
schema: {
model: {
fields: {
birthday: { type: "date"}
}
}
});
And when you define the Grid:
kendoGrid({
selectable: whatever values..etc
columns: your-response,
dataSource: kendoDS
});
See this for more info: http://www.kendoui.com/forums/framework/data-source/json-date-handling-changed-in-latest-release.aspx
Use template like the following or like the one in the documentation link.
#= kendo.format("{0:d}",theDateTimeFieldName)#
var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
#= kendo.toString(new Date( parseInt(JSONDateTime.substr(6)) + offsetMiliseconds),"dd-MMM-yyyy hh:mm tt") #
Related
I want to sort by a datetime value, and group by a date string.
I have found the sortProperty on the grouper:
You can set this configuration if you want the groups to be sorted on something other then the group string returned by the groupFn. This serves the same role as property on a normal Ext.util.Sorter.
So I tried the following, which only sorts the date correctly:
grouper:{
sortProperty: 'StartDate',
property: 'StartDateOnly',
direction: 'ASC'
},
and I tried the following, which only sorts the time correctly:
grouper:{
sortProperty: 'StartDate',
property: 'StartDateOnly',
direction: 'ASC'
},
sorters: [{
property: 'StartDate',
direction: 'ASC'
}]
You can try it here:
https://fiddle.sencha.com/#view/editor&fiddle/2cei
What am I doing wrong here?
The problem is that you make a sort on a string type but you have date by changing the code on your sencha fiddle like this :
Ext.application({
name : 'Fiddle',
launch : function() {
var mdl = Ext.define('', {
extend: 'Ext.data.Model',
fields: [{
/** #field {date} StartDate with format: Y-m-d H:i */
name: 'StartDate',
type: 'date',
dateFormat: 'Y-m-d H:i'
},{
name: 'StartDateOnly',
type: 'date', // <= here before it was 'string'
convert: function(v,rec) {
return Ext.Date.format(rec.get('StartDate'), 'D d.m.Y');
}
}]
});
...
Then you run, you can see that the group of date StartDateOnly is now order by ASC.
After that, you can retrieve this data in date format and convert it into a string. But if you make a sort on a string you will always have the first of February last like now.
The problem is that it does an alphabetical sort on the days of the week.
In order: Fri, Sat, Thu.
Sencha support did not provide a full solution, but helped me a bit on my way. They found how to "fix" the problem at hand and told me to change the data type of the StartDateOnly column to date, but neither did this fix prove universal nor did it make any sense that this fixed the problem at all. But it showed some underlying correlations, which helped me to dig into the problem and find a universal solution.
I would say the issue is a bug in ExtJS, but I am awaiting confirmation from Sencha on this. I have to yet find the exact line where the bug is introduced.
Problem description:
When sortProperty is set on the grouper and at least one sorter is added on the store, the "transform" function of the grouper is set to the "transform" function of the first sorter (otherwise, it is null).
Solution:
You can manually override the transform function on the grouper by adding the correct sort type explicitly to the grouper config:
grouper:{
sortProperty: 'StartDate',
property: 'StartDateOnly',
transform: Ext.data.SortTypes.asDate,
direction: 'ASC'
},
Very easy case displayed here: http://jsbin.com/ahoYoPi/3/edit
I need to specify that the child's inner field to filter (eq) against the parent's value field is "category_id"... Of course, Kendo's documentation doesn't say anything about how to do that... Or is it something so super obvious it doesn't deserve to be explained ?
var categoriesList = new Array (
{"id":"1","categoryName":"Fruits"},
{"id":"2","categoryName":"Vegetables"} );
var productsList = new Array(
{"id":"1","categorie_id":"1","productName":"Apples"},
{"id":"2","categorie_id":"1","productName":"Oranges"},
{"id":"3","categorie_id":"2","productName":"Carottes"},
{"id":"4","categorie_id":"2","productName":"Patatoes"});
$("#categories").kendoDropDownList({
dataTextField: "categoryName",
dataValueField: "id",
dataSource: categoriesList,
optionLabel: "----------------" ,
change: function() {
$("#products").data("kendoDropDownList").value(0);
}
});
$("#products").kendoDropDownList({
cascadeFrom: "categories",
dataTextField: "productName",
dataValueField: "id",
dataSource: productsList,
optionLabel: "----------------" ,
});
The documentation about cascading is available here: http://docs.kendoui.com/getting-started/web/combobox/cascading
Here is how filtering works:
If the parent has a value, then the child will be enabled and will
filter its data depending on it. Here how the filter options will look
like:
field: "parentID", //the dataValueField of the parent
operator: "eq",
value: "" //parent's value
This means that the child dropdownlist (combobox) will use the field configured via dataValueField of the parent to do the filtering (cascading). In your case this doesn't work because dataValueField of the parent is set to "id". This field however serves a different purpose in the productsList array.
Currently there is no feature which allows one to specify the field used for cascading.
You have two options:
Do what #OnaBai suggested. Rename the "id" field of the categoriesList to "categorie_id" and set dataValueField accordingly.
Implement cascading manually. First remove the cascadeFrom option and then do this in the change event of the parent:
change: function() {
var products = $("#products").data("kendoDropDownList");
products.dataSource.filter( {
field: "categorie_id",
value: this.value(),
operator: "eq"
});
products.value(0);
}
Here is a live demo: http://jsbin.com/ogEj/1/edit
I have a doubt in Kendo chart tool tip .That is how to display the date with time format .I have a field time: `2013-02-13 16:58:07`,
some thing like this so when i am reading in tool tip template i am
calling the field as
tooltip: {
visible: true,
template: '#= category # ,
font: '11px Trebuchet MS'
}
In tool tip it was showing as fri feb 01 2013 00:00:00 gmt+0530(indian standard time)**
How can I change that and display only 2013-02-13 16:58:07 using remote data
I used dataitem in local data it was working fine but with remote data i am getting as undefined.
tooltip: {
visible: true,
format: "{0}",
template: 'DATE:#= dataItem.time<br/>'
}
The problem is the timeformat,this is from ww3c:
var d=new Date();
var n=d.toISOString();
And this is the result:
2013-02-28T07:41:04.188Z
Also try to read this:
http://blog.stevenlevithan.com/archives/date-time-format
/Date(1352658600000)/
When Display the date Date is not Display in Proper Format.
How to convert in to proper Format(dd/mm/yyyy)?
All you need to make the conversion is setting date formatter in jqGrid colum model:
$('#gridId').jqGrid({
...
colModel: [
...
{ name: 'Column Name', index: 'Column Index', ..., formatter: "date", formatoptions: { newformat: "m/d/Y"} },
...
],
...
});
For the newformat option jqGrid supports PHP date formatting.
Taken from the accepted answer here - Converting json results to a date
You need to extract the number from the string, and pass it into the Date constructor:
var x = [ {"id":1,"start":"\/Date(1238540400000)\/"}, {"id":2,"start":"\/Date(1238626800000)\/"} ];
var myDate = new Date(x[0].start.match(/\d+/)[0] * 1));
The parts are:
x[0].start - get the string from the JSON
x[0].start.match(/\d+/)[0] - extract the numeric part
x[0].start.match(/\d+/)[0] * 1 - convert it to a numeric type
new Date(x[0].start.match(/\d+/)[0] * 1)) - Create a date object
Does anybody have an example of using the date formatter with a server side database, or can you point me to something to help?
You can find information about predefined formatters on the jqGrid wiki.
The following is an example of how date formatting can be used in the grid. The format ShortDate displays the date according to the selected locale. You can use your own formatting instead, for example Y-m-d H:i:s.
srcformat describes the format of the date as sent by the server, newformat describes the desired output format.
This example includes searchoptions which will make sure that your users can select the desired date with the help of a datepicker when performing a search on the grid.
colModel :[
{ name:'startdate', index:'startdate', formatter:'date',
formatoptions: { srcformat:'m/d/Y', newformat:'ShortDate' },
searchoptions: { sopt: ['eq','lt','le','gt','ge'],
dataInit : function (elem) {
$(elem).datepicker({ changeMonth: true, changeYear: true,
dateFormat: 'yy-mm-dd' });
}
}
}
]
We can also take the transient field of the date in pozo class and check in getter methed if date is not null then convert it into datetostring .Also we have to change in jsp where we used this jqgrid we have to take transient field instead of date field.
example :
(Pozo Class)
transient private String indentDate_String;
public String getIndentDate_String()
{
if(indentDate != null)
indentDate_String = DateConversion.dateToString(indentDate);
return indentDate_String;
}
jqgrid (jsp form):
colNames:['Indent Date'],
colModel:[
{name:'indentDate_String',index:'indentDate',autoheight: true, width:100},
]