jQuery UI Widgets Forums Angular cellsformat in jqxgrid is not working

This topic contains 13 replies, has 3 voices, and was last updated by  rbmanian75 7 years, 8 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • cellsformat in jqxgrid is not working #88345

    rbmanian75
    Participant

    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

    cellsformat in jqxgrid is not working #88351

    Peter Stoev
    Keymaster

    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 Stoev

    cellsformat in jqxgrid is not working #88369

    rbmanian75
    Participant

    Thank 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.

    cellsformat in jqxgrid is not working #88370

    rbmanian75
    Participant

    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);
    
    cellsformat in jqxgrid is not working #88411

    Ivo Zhulev
    Participant

    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:00

    As Peter said this is probably a problem the date you are trying to format.

    Best Regards,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

    cellsformat in jqxgrid is not working #88424

    rbmanian75
    Participant

    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 Empty

    I dont see see what is wrong with my date. jscript is parsing the date correctly.

    Thanks

    cellsformat in jqxgrid is not working #88488

    Ivo Zhulev
    Participant

    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,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

    cellsformat in jqxgrid is not working #88573

    rbmanian75
    Participant

    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

    cellsformat in jqxgrid is not working #88580

    Ivo Zhulev
    Participant

    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,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

    cellsformat in jqxgrid is not working #88588

    rbmanian75
    Participant

    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

    cellsformat in jqxgrid is not working #88628

    Ivo Zhulev
    Participant

    Hi rbmanian75,

    We need the jQuery $ so in order not to get conflicts you must comment/remove the last line in your index.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,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

    • This reply was modified 7 years, 8 months ago by  Ivo Zhulev.
    cellsformat in jqxgrid is not working #88635

    rbmanian75
    Participant

    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

    cellsformat in jqxgrid is not working #88646

    Ivo Zhulev
    Participant

    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,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

    cellsformat in jqxgrid is not working #88741

    rbmanian75
    Participant

    Hi,

    Thanks. We dont use npm start since we are using a visual studio project and we dont have any start scripts.

    Thanks

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.