Date Filter Column Empty

[Keith Rosenbauer]

Using the Grid component, I have an issue where the Date Filter column has no data in it and is thus not usable, despite all other columns working fine.

[Keith Rosenbauer]

Filter:


The date field is coming in from my API formatted like this: 2024-05-13T00:00:00.000Z

Am I doing something wrong here?  Running version: 26.2.14

[Keith Rosenbauer]

Code:

/*

* Grid Settings

*/

let grid;

const toolbarClick = args => {

if (grid && args.item.id === 'ProdPurchReport_excelexport') {

grid.excelExport();

}

};

const contextMenuItems: ContextMenuItem[] = [

'AutoFit',

'AutoFitAll',

'SortAscending',

'SortDescending',

'FirstPage',

'PrevPage',

'LastPage',

'NextPage',

];

const recentlyPurchasedBulb = (props: any) => {

let backgroundColor = 'green';

if (props.not_purchased_recently) {

backgroundColor = 'red';

}

return (

<div

style={{

backgroundColor,

width: '20px',

height: '20px',

borderRadius: '50%',

display: 'inline-block',

}}

>

&nbsp;

</div>

);

};

const filterSettings: FilterSettingsModel = { type: 'CheckBox' };

const toolbarItems = isMobile ? ['Search'] : ['Search', 'ExcelExport'];

const serviceItems = isMobile

? [Filter, Page, Sort, Search, Toolbar, Resize, Freeze]

: [

Filter,

Page,

Sort,

Search,

Toolbar,

Resize,

Freeze,

ExcelExport,

ContextMenu,

PdfExport,

];

// Using RTK Query's isLoading, show a loading message

if (isLoading) return <AppLoader />;

return (

<Grid item xs={12}>

<StyledSyncfusionGrid>

<GridComponent

id="ProdPurchReport"

dataSource={prodPurchReportRes}

allowPaging={true}

allowSorting={true}

allowFiltering={true}

allowResizing={true}

allowExcelExport={!isMobile}

allowPdfExport={true}

allowTextWrap={true}

pageSettings={{ pageSize: 15 }}

textWrapSettings={wrapSettings}

filterSettings={filterSettings}

contextMenuItems={contextMenuItems}

toolbar={toolbarItems}

enableHeaderFocus={true}

statelessTemplates={['directiveTemplates']}

frozenColumns={1}

toolbarClick={toolbarClick}

ref={g => {

grid = g; // Assign the grid reference

}}

>

<ColumnsDirective>

<ColumnDirective

field="item_number"

headerText="Item #"

width="200"

textAlign="Right"

/>

<ColumnDirective

field="product_description"

headerText="Product"

width="350"

textAlign="Right"

/>

<ColumnDirective

field="product_category"

headerText="Product Category"

width="180"

textAlign="Right"

/>

<ColumnDirective

field="invoice_date"

headerText="Last Purchase Date"

width="140"

type="date"

format="yMd"

textAlign="Right"

/>

<ColumnDirective

field="not_purchased_recently"

headerText=" "

allowFiltering={false}

template={recentlyPurchasedBulb}

width="50"

textAlign="Right"

/>

<ColumnDirective

field="last_ordered_quantity"

headerText="Last Ordered Qty"

width="128"

format="N0"

textAlign="Right"

/>

<ColumnDirective

field="last_shipped_quantity"

headerText="Last Shipped Qty"

width="130"

format="N0"

textAlign="Right"

/>

<ColumnDirective

field="unit_price"

headerText="Last Unit Price"

width="120"

format="C"

textAlign="Right"

/>

</ColumnsDirective>

<GridsInject services={serviceItems} />

</GridComponent>

</StyledSyncfusionGrid>

</Grid>

);

[Vikram Sundararajan]

Hi Keith Rosenbauer,

Greetings from Syncfusion support,

We understand that when open the date filter dialog, it shows empty. We created a sample to try and replicate the issue you're experiencing, but we were unable to reproduce it. Everything seems to be functioning correctly on our end. Please refer the sample and screenshot for more information,

Sample: https://stackblitz.com/edit/react-xyr4ca-dmlwod?file=index.js

Screenshot:

 

 

We recommend using the provided sample as a reference to resolve the issue you mentioned. If the issue persists, please provide the below details for further validation,

1. Are you using DataManager to bind the data or custom binding? If using DataManager, could you provide the adaptor details?
2. Are there any errors in the browser console when opening the filter dialog?
3. Provide the issue reproducible sample or try reproducing the issue in the sample we shared.

Regards,

Vikram S

[Keith Rosenbauer]

#1 - No we are not using DataManager, rather using Redux (RTK Query) to pull back data from the back-end

#2 - No errors in the browser console

I did have milliseconds in my date, but removed those to align with your example, but still don't see the dates.  I will attempt to load this data via DataManager, but haven't used that so need to get familiar with that first. 

Thanks as always for the quick replies!

[Keith Rosenbauer]

In troubleshooting a bit more this morning, if I comment out the

// type="date"

I do see the data in the filter

[Vikram Sundararajan]

Hi Keith Rosenbauer,

We understand that you're not using DataManager to bind your data. Based on your description, it seems the issue with the filter dialog may be due to the date being in string format, which is causing the records not to display. To resolve this, you need to ensure that the date is converted from UTC to a Date object.

If you were using DataManager and Adaptors, this conversion would happen automatically. However, since you're using a custom approach, the dates remain in UTC string format and need to be explicitly converted to Date objects before binding them to the Grid.

In Syncfusion, we have a utility library called DataUtil, which provides a convenient method called parse.parseJson to facilitate this conversion. The stringified data needs to be parsed using DataUtil’s parseJson method of EJ2 Data before assigning it as the Grid data source. This is demonstrated in the code snippet below:

// import the library from ej2-data;

import { DataUtil } from '@syncfusion/ej2-data';

 

// Parse the stringified data

let data = DataUtil.parse.parseJson(JSON.stringify(customData));

Sample: https://stackblitz.com/edit/react-hzsven-7yn7dj?file=data.js,index.js

Please let us know if you need any further assistance.

Regards,

Vikram S