I would like to have a DateTime column in my Kendo UI grid. I've searched on forums, but I didn't find a solution for this problem.
My field for the TimeStamp column is defined such as:
TimeStamp: { type: "date" },
The records are showing data according to the format specified in the template. But I would like to be able to filter my data source with greater precision. However, currently my filter is only able to filter by date. Is there a way to filter by DateTime instead of filtering only by date?
I was informed that this is not possible currently with Kendo UI. I know this is bad news, but this is the answer to my question.
you can achieve it to use template on kendo grid column, create one more property and pass that property in template in kendo grid column.
like
timeStamp: { type: "date" },
timeStamp1: { type: "String" },
pass timestamp1 in template like
{
title: "Last Login",
width: 80,
template: '<span>#= timeStamp1#</span>',
field: "timeStamp",
type: "date"
},
its work fine according your requirement and sorting will work fine like database sorting.
Its Posible:
DeliveredDate: {
type: "datetime",
editable: false,
nullable: false
}
And the template is:
{
field: "DeliveredDate",
title: "Delivered Date",
template: '#= kendo.toString(data.DeliveredDate,"dd/MM/yyyy") === null ? "--/--/----" : kendo.toString(data.DeliveredDate,"dd/MM/yyyy HH:mm") + " Hrs" #',
width: 60,
groupable: false,
sortable: true,
filterable: true
}
The easiest Way to us the TimeStamp format data from your Database for KendoGrid.
In your HTML file, use the data from DB as shown.
<kendo-grid [data]="gridData">
<kendo-grid-column class="CreatedAt" field="CreatedAt" title="title"
[width]="120" [headerStyle]="{'background-color': '#36455a','color': '#fff'}"
[style]="{'background-color': '#36455a','color': '#fff'}">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.CreatedAt | date:"yyyy/MM/dd HH:mm:ss"}}
</ng-template>
</kendo-grid-column>
</kendo-grid>
PS: gridData is my var that stores Data from DB. and CreatedAt is one of the fields.
Related
I figure that this is some timezone/UTC issue - but I can't quite figure it out.
I have setup Netlify CMS on my Gatsby website using the following config.yml:
backend:
name: git-gateway
branch: master
publish_mode: editorial_workflow
media_folder: src/images/uploads
public_folder: /uploads
collections:
- name: "tourInfo"
label: "Tour Info"
files:
- file: "static/json/tours.json"
label: "Tours"
name: "tours"
fields:
- {label: "Tour", name: tour, widget: list, fields: [
{label: "Date", name: date, widget: "date"},
{label: "Spaces", name: spaces, widget: "number"},
{label: "Booked", name: booked, widget: "number", required: false} ]}
I've used this to create tour dates but on doing so there's inconsistencies:
On selecting a date through the CMS the date appears correct as above.
But then the date is saved as:
This is obviously inconsistent with the date which I input.
This behaviour is also consistent across all entered dates fetched via Gatsby on the front end:
[
{
"date":"2019-04-03T23:35:50.291Z",
"spaces":6,
"booked":6
},
{
"date":"2019-04-17T23:36:08.718Z",
"spaces":6,
"booked":null
},
{
"date":"2019-05-01T23:36:19.622Z",
"spaces":6,
"booked":null
},
{
"date":"2019-05-15T23:36:33.206Z",
"spaces":6,
"booked":null
},
{
"date":"2019-06-05T23:36:49.265Z",
"spaces":6,
"booked":null
},
{
"date":"2019-06-19T23:37:09.924Z",
"spaces":6,
"booked":6
}
]
They're all a day out.
I suspect this is some type of timezone issue? My locale is currently on BST.
Surely when working with the date widget time shouldn't matter - why does Netlify even have to save a time? I'm only inputting a date.
How can I rectify this? So when I enter 2019/04/04 I get 2019/04/04?
There is the ability to set the format for date in NetlifyCMS.
Example
{label: "Date", name: date, widget: "date", dateFormat: "YYYY-MM-DD", "format": "YYYY-MM-DD"},
dateFormat is the widget output
format is the data output
These formats are moment based formatting.
See Docs
We can do this to disable the the date calendar only keeps the time selector:
Inside config.yml file, just need to write down something commands like this:
name: 'end_time'
label: 'End Time'
widget: 'datetime'
format: 'HH:mm A'
dateFormat: false
timeFormat: true
It will looks like this:
how can I use jsgrid to present data on a table like the one jsgrid uses
i tried retrieving data as said by this documentation
https://firebase.google.com/docs/database/rest/retrieve-data#section-rest-reading-data-get
$.getJSON("/*url of databse*/.json",
function(data){
clients = data;
console.log(clients);
});
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Email", type: "number", width: 50 },
{ type: "control" }
]
});
is there anyway to present data on a table like in jsgrid?
jsgrid works with any REST service, firebase is not an exception.
In your example data loading happens asynchronously, so when grid is initialized clients data is not loaded yet. To fix the problem initialize grid on done of the $.getJSON:
$.getJSON("/*url of databse*/.json").done(function(data)
// initialize grid here
)
Worth to note that setting grid data with data config option is for static scenario. More common way is to define the controller (http://js-grid.com/docs/#grid-controller).
I have grid having grouped columns.
Some of my code is as follows:
Ext.require([
'Ext.grid.*',
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel'
...
]);
var filters = {
ftype: 'filters',
encode: false,
local: true
};
var grid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
selType: 'cellmodel',
store: store,
columns:[
{
header: "Column1"
dataIndex: 'Column1'
},{
header: "Column2",
columns : [{
header: "innerColumn1",
dataIndex: 'innerColumn1'
},{
header: "innerColumn2"
dataIndex: 'innerColumn2'
}]
},{
header: "Column3",
dataIndex: 'Column3'
}],
features: [filters]
...
Now, if I use grid.columnManager.getColumns() it returns following columns:
Column1
innerColumn1
innerColumn2
Column3
It is not returning Column2 which is a parentColumn/groupColumn of innerColumn1 & innerColumn2. Which method of Ext Js I should use to get Column2 as well in the columnList? I am using Ext Js 4.2. Any help will be appreciated.
grid.getColumnmanager().getColumns() does not provide parent column of grouped columns. Column manager is to deal with only leaf columns.
While iterating columns you can access isSubHeader property only available in child groped columns and after that through ownerCt property you can access parent column.
hope this helps.
One of the solution to get all the columns is to make use of Ext ComponentQuery. I have created this fiddle. Look into the developer console of after running this fiddle.
So simplest query to get all the columns is :
grid.query('gridcolumn:not([hidden])')// Open fiddle for full example
It will simply return all visible columns. You can change query according to your requirements.
For Example, to get only the Grouped Column, you can use this
grid.query('gridcolumn[isGroupHeader=true]')
Click here for more information about ComponentQuery.
I'm using codeingniter, doctrine and KendoUI on a project and I've come across this problem:
in my DB I have 2 columns of a DB but I want to show them in only one column in the KendoUI grid, so far I've been able to show them, but when I try to create a new row or edit an existing one I can't because the in the template I created I don't know how to specify the fields so I can edit and create rows, I pasted a chunk of the code and if you see in the 4th column is the problem that I have.
Thanks in advance.
schema: {
model: {
id: "idAction",
fields: {
actionId: { editable: false },
strategy: {field:"strategy", type:"number"},
actionName: { validation: { required: true } },
actionDescription: { validation: { required: true }, type:"string" },
actionEstimatedTimeQuantity: {validation: {required:true}, type:"number"},
actionEstimatedTimeUnit: {validation:{required:true}},
actionEstimatedCost:{validation:{required:true},type:"number"},
actionCreatedBy: { editable:false },
actionCreatedDate: { editable:false, type:"date" }
}
}
}
And in my columns I have
columns: [
{
field: "strategy",
width: "180px",
title: "Estrategia a usar",
values: strategies
},
{
field: "actionName",
width: "100px",
title: "Accion"
},
{
field: "actionDescription",
width: "200px",
title: "Descripción"
},
{
field: "actionEstimatedTimeQuantity - actionEstimatedTimeUnit"
template: "#= actionEstimatedTimeQuantity # - #= actionEstimatedTimeUnit #",
width: "150px",
title: "Tiempo Estimado"
},
{
field: "actionEstimatedCost",
width: "150px",
title: "Costo Estimado"
},
{
field: "actionCreatedBy",
width: "100px",
title: "Creada Por"
},
{
field: "actionCreatedDate",
width: "150px",
title: "Fecha de Creación",
format: "{0:MM/dd/yyyy}"
},
Try making a new object 'model' that represents your target data. Populate it and parse it in a controller using whatever logic you specify. Map this new model to your grid.
My team does this for every data element, essentially turning them into business objects, even if it is a direct 1 to 1 relationship.
I think you want to display two Numeric columns as a string combination "TimeQuantitiy - TimeUnit". In this case, better you add one more field of type string to the datasource of your kendo grid.
from Server: send one more column of type string "a-b"
at client: display it in grid.
Editing: You have two choices -
Use one textbox which accepts input string as "a-b"
Use two textboxes seperated with "-" (you might need to define a custom editor for you column in this case"
I would like to apologize for being more theoretical, I would try to upload some programming if possible.
I have just recently made a move from Adobe Flex to Sencha ExtJs.
I can't seem to find an equivalent of data binding in ExtJs where a form value depends on another form value.
e.g. I am creating an SMS window where i show the count of characters entered in a message field.
This is how i am doing in ExtJS. Also, the fiddle - http://jsfiddle.net/xxB4J/
Ext.create('Ext.window.Window',{
items: [
{
xtype: 'textarea',
fieldLabel: 'Message',
listeners: {
change: function() {
var countLabel = this.up('window').down('#lbCharacterCount');
countLabel.setText(this.getValue().length + '/160 Characters');
}
}
},
{
xtype: 'label',
itemId: 'lbCharacterCount',
text: '0/160 Characters'
}
]
}).show();
Now, in Flex this was as simple as doing
<mx:Text text="{message.text.length.toString()}/160 Characters}" />
So, just want to know if there is some sort of similar data binding in ExtJS? or the way i am doing is the only way of doing it?
Thank you
Maybe, you could use a textarea configuration:
Sencha:
maxLength and maxLengthText
or is the control field editable ?