datetime in grid

[Bob]

 

My framework uses moment.js for datetime values which return values in ISO dateformat.  I have managed to format the correct datetime values in the grid by calling a function in my controller:

<kendo-grid-column field="creationTime" title="{{ l('CreationTime')}}" width="150" [hidden]="false" media="lg">
    <ng-template kendoGridCellTemplate let-dataItem>
        {{ formatDate(dataItem.creationTime) }}
    </ng-template>
</kendo-grid-column>

And my function:

formatDate(date: any) {
    return moment(date).format('L');
}

The problem is that the filter now sees the data as a string and therefore I get the string filter.  I have exhaustively searched the forums on how to set the ISO date value to a javascript Date value and find myself scratching my head because all of the examples are either JQuery or angular with rxjs prior to angular 5.5.

So, I have the following method where this.gridData is a GridDataResult which is bound to my grid:

getEntitiesForKendo() {
    this.gridLoading = true;
    this._kendoGridService.getEntities(this.state)
        .subscribe((data) => {
            this.gridData = data;
            this.getOrganisationUnits();
            this.gridLoading = false;
        });
}

Which works great but a datetime value in this.gridData I have to use a function to convert to datetime in the grid column.  It would be better to cast the ISO date value to a javascript value so the grid can understand it but so far my investigations shjow that the only advice from Kendo is that I have to cast the value:

data.datetimevalue = new Date(data.datetimevalue)

In the subscription to my observable how do I get to the datetime value and cast it?

I have tried both the pipe and map operators to no avail.  Surely the conversion of ISO datetime values to javascript values is common?  Can anyone give me any pointers?  At the moment (sic.) I have had to disable filters on the datetime column which is not really what I want.

 

 

 

[Bob]

The answer is a simple for each:

getEntitiesForKendo() {
    this.gridLoading = true;
    this._kendoGridService.getEntities(this.state)
        .subscribe((data) => {
            data.data.forEach((d) => {
                d.creationTime = new Date(d.creationTime);
            });
            this.gridData = data;
            this.getOrganisationUnits();
            this.gridLoading = false;
        });
}

And then add the filter="date" to the column template:

<kendo-grid-column field="creationTime" filter="date" title="{{ l('CreationTime')}}" width="150" [hidden]="true" media="lg">
    <ng-template kendoGridCellTemplate let-dataItem>
        {{ formatDate(dataItem.creationTime) }}
    </ng-template>
</kendo-grid-column>

Sometimes things are that simple!

[Svet]

Hi Bob,

Indeed, we need to convert all the dates from an ISO format to an actual JavaScript Date instance.

I would also like to add, that we could use RxJS's map operator instead of the forEach.

Regards,
Svetlin
Progress Telerik

[Bob]

Hi Svetlin,

Please show the code for using Rxjs. People on this forum and looking for code solutions not hints on what they should google.

Cheers,
Bob

[Svet]

Hi Bob,

Check the following example:
https://stackblitz.com/edit/angular-w1cqwo-3f8wuq?file=app%2Fnorthwind.service.ts

It demonstrates a grid that gets its data from a remote server. Once the data is received via an HTTP GET request I am modifying it using RxJS's map operator. Check the northwind.service.ts file. In the fetch method, first I am adding a Date field to all items equal to "2018-08-16T06:52:43Z" (marked in red code) and then I am converting this field to a valid JavaScript Date (marked in orange code): 

    protected fetch(tableName: string, state: any): Observable<GridDataResult> {
        const queryStr = `${toODataString(state)}&$count=true`;
        this.loading = true;

        return this.http
            .get(`${this.BASE_URL}${tableName}?${queryStr}`)
            .pipe(
                map(response => (<GridDataResult>{
                    data: response['value'],
                    total: parseInt(response['@odata.count'], 10)
                })),
                map(res => {
                    res.data.map(item => {
                      item.Date = "2018-08-16T06:52:43Z";
                      return item;
                    })
                    return res;
                }),
                map(res => {
                    res.data.map(item => {
                      item.Date = new Date(item.Date);
                      return item;
                    })
                    return res;
                }),
                tap(() => this.loading = false)
            );
    }
}

I hope this provides a clear example of how we can use RxJS map operator.

Please note, that this is a functionality, that is not related to Kendo Ui for Angular. There are multiple available resources online, that focus on the use of RxJS and provide detailed explanations on the different use cases. Check their official documentation at the following link:
http://reactivex.io/

I hope this helps. Let me know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Bob]

Hi Svetlin,

Brilliant, exactly what was needed.  I will refer back here when I can not find a solution using the forEach loop.

Cheers,
Bob