jQuery UI Widgets › Forums › Angular › cellsformat in jqxgrid is not working
Tagged: angular 2 grid, angular grid, JavaScript, jqxgrid
This topic contains 13 replies, has 3 voices, and was last updated by rbmanian75 8 years ago.
-
Author
-
Hi,
I am getting the json data with date as in the following string 2016-10-12T12:56:06.85+01:00. When i set the column as
{
text: ‘Start Time’,
datafield: ‘START’,
width: 150,
cellsformat: ‘yyyy-MM-dd HH:mm:ss’
},the date column is not formatted. it displayed the complete string 2016-10-12T12:56:06.85+01:00.
How do i format this 2016-10-12T12:56:06.85+01:00 to be displayed as yyyy-MM-dd HH:mm:ss.
Thanks
Hi rbmanian75,
Check whether the datafields in the Grid’s source object are set, whether the datafield type is set to “date” and if necessary you will also need to set the “format” of the datafield to be the same as the format in your data source. Otherwise, your Date string will not be parsed and having in mind that it contains Timezone info in it, that is most probably the reason for this behavior.
Best Regards,
Peter StoevThank you for the help.
I have specified the type as date and now i have set the format to yyyy-MM-ddTHH:mm:ss:ffzzz. Event after setting the format it does not work.
here is my code
export class ProcessComponent implements AfterViewInit { @ViewChild('gridReference') myGrid: jqxGridComponent; constructor(private service: TraducoesService) { } source = { datatype: "json", url: "process", datafields: [ { name: 'ID', type: 'float' }, { name: 'DESCR', type: 'string' }, { name: 'START', type: 'date', format: 'yyyy-MM-ddTHH:mm:ss:ffzzz' }, { name: 'END', type: 'date', format: 'yyyy-MM-ddTHH:mm:ss:ffzzz' }, { name: 'STATUS', type: 'string' }, { name: 'ERROR', type: 'string' }, ] }; dataAdapter = new $.jqx.dataAdapter(this.source, { loadServerData: (serverData, source, callback) => { this.service.ProcessStatus().subscribe((processes) => { callback({ records: processes, totalrecords: processes.length }) }); } }); ngAfterViewInit(): void { this.myGrid.createWidget(this.settings); } settings: jqwidgets.GridOptions = { width: '100%', height: '630px', columnsresize: true, source: this.dataAdapter, filterable: true, pageable: false, sortable: true, altrows: true, enabletooltips: true, editable: false, selectionmode: 'singlerow', columns: [ { text: 'Id', datafield: 'ID', width: 100 }, { text: 'Process', datafield: 'DESCR', width: 300 }, { text: 'Start Time', datafield: 'START', width: 150, cellsformat: 'yyyy-MM-dd HH:mm:ss' }, { text: 'End Time', datafield: 'END', width: 150, cellsformat: 'yyyy-MM-dd HH:mm:ss' }, { text: 'Status', datafield: 'STATUS', width: 200 }, { text: 'Error', datafield: 'ERROR', width: 300 }, ], handlekeyboardnavigation: (event) => { var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0; if (key == 46) { var rowindex = this.myGrid.getselectedrowindex(); var rowData: Process = <Process>this.myGrid.getrowdata(rowindex); this.service.DeleteProcess(rowData.ID).subscribe((error) => this.myGrid.deleterow(rowindex)); return true; } }, }; }
Thank you for the help.
Hi,
This code seems to be converting the string to jscript date perfectly. Then why jqxgrid is failing to convert.
var dt = new Date('2016-10-12T12:56:06.85+01:00'); alert(dt);
Hi rbmanian75,
I`ve tested this and all works fine.
Data and result:
1) the date –Wed Jun 08 2016 00:00:00 GMT+0300 (FLE Daylight Time)
2) source – { name: ‘date’, type: ‘date’ }
3) column –{ text: 'Ship Date', datafield: 'date', width: 210, cellsformat: 'yyyy-MM - dd HH: mm:ss' }
4) result – 2016-04 – 08 00: 00:00As Peter said this is probably a problem the date you are trying to format.
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/Please try this
1) the date – ‘2016-10-12T12:56:06.85+01:00’ as string from JSON
2) source – { name: ‘date’, type: ‘date’, format: ‘yyyy-MM-ddTHH:mm:ss:ffzzz’ }
3) column – { text: ‘Ship Date’, datafield: ‘date’, width: 210, cellsformat: ‘yyyy-MM – dd HH: mm:ss’ }
4) result is EmptyI dont see see what is wrong with my date. jscript is parsing the date correctly.
Thanks
Hi rbmanian75,
I’ve tested it again with the data you provided. It worked.
Maybe try it on another PC and see if it works?Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/Hi,
Please see the attached example by downloading from
https://1drv.ms/u/s!Agn6grFjxV5QijFWal_rUvK1CHEZ
This is happening when we are using the loadserverdata.
Please open the project in visual studio 2015 and build it. before building please run npm install.
When you are building you may get the erro
Build:Subsequent variable declarations must have the same type. Variable ‘$’ must be of type ‘any’, but here has type ‘JQueryStatic’.this is because of your angular components declares $ as any. To fix this i modified your angular grid component $ as jquerystatic.
Thanks
Hi rbmanian75,
I`ve got your example to work fine when i formatted the date:
loadServerData: (serverData, source, callback) => { let data: any = this.data; for (let index in data) { data[index].date = new Date(data[index].date); } callback({ records: data, totalrecords: this.data.length }); }
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/Yeh,
I understand this will work. this is an unnecessary arbitrary code we have to run to make it working. It would be better if you could handle it in the callback or like not using loadServerData.
Any how thank you for the help.
Please let us know when you will fix this issue when jquery typings included in the VS asp.net project.
Build:Subsequent variable declarations must have the same type. Variable ‘$’ must be of type ‘any’, but here has type ‘JQueryStatic’.
Regards
Hi rbmanian75,
We need the jQuery
$
so in order not to get conflicts you must comment/remove the last line in yourindex.d.ts
file which is located in\typings\globals\jquery
.From:
declare module "jquery" { export = $; } declare var jQuery: JQueryStatic; declare var $: JQueryStatic;
To:
declare module "jquery" { export = $; } declare var jQuery: JQueryStatic;
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/Hi,
I dont want to do that. Because i need the intellisense and compiler error in visual studio asp.net project.
The best thing to do is , please declare $ as jQueryStatic in your angular components. Thats what i am doing. I have modified your angular components to have $ declared as jQueryStatic instead of any.
So my best bet is to update your components rather than modifying the jquery typings.
Thanks & Regards
Hi rbmanian75,
Have you seen that by doing
npm start
you get an error:Property 'jqx' does not exist on type 'JQueryStatic'.
If this a better solution for you that`s fine, or you if found a way to bypass that error please share. 🙂
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/Hi,
Thanks. We dont use npm start since we are using a visual studio project and we dont have any start scripts.
Thanks
-
AuthorPosts
You must be logged in to reply to this topic.