Date time Filter dialog not working fine

[Garima Jain]

hie when am doing this date time not filtering properly. I need to display in the specified format & also want to filter & sort the data accordingly for this column. 
Date is coming in the datasource in this format -

<ColumnDirective field='created_at' headerText='Created At' width='170' type="dateTime" format='MM/dd/yyyy HH:mm:ss'></ColumnDirective>

[Vasanthakumar K]

Hi Garima Jain,

Greetings from Syncfusion support.

Based on your query, when you perform filtering, the dateTime column is not filtering properly, and you want to display the date in the specified format and perform filtering and sorting in the column. 

We have prepared a sample using the provided information and tried to reproduce the issue form our side, but we were not able to reproduce the issue from our side. We have attached the sample and video demo for your reference.

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

Note: The EJ2 Grid supports filtering when date values are provided as actual Date objects, standard ISO 8601 format, or Microsoft format date strings. However, any other formats are treated as plain text (strings), which prevents the Grid from performing proper date filtering.

If you're still facing the issue, kindly share the below details

• Explain the exact issue you are facing, are you facing issue while performing simple grid actions like filtering or sorting? Or are you facing the issue while searching the data value in the filter popup of the excel or checkbox type of filtering?
• Complete grid rendering code, with the type of filtering you are using.
• Ensure the date values are in the above-mentioned format in your database.
• Reproduce the issue in the sample provided or share a issue reproducing sample.
• Synfusion package version you are using.

Regards,

Vasanthakumar K

[Garima Jain]

hie the filter is of type menu 
can you now help me how to fix this filter issue 

also 

if the values are combining 
& i have displayed it in grid 

const convertedData = adminData.map(adminDetails => ({
...adminDetails,
converted_roles: adminDetails?.roles ? adminDetails.roles?.map(role => role?.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ')) : null,
}));

<ColumnDirective field='converted_roles' headerText='Roles' type='string'
width='200'></ColumnDirective>

THis is also not fi

[

  "report",

  "onboarding",

  "sessions",

  "support"

]

[Mohanraj Rengasamy]

Hi Garima Jain,

Greetings from Syncfusion support!

We checked your query with provided the details and you have defined multiple values in single column value using comma separator which is showing on “converted_roles” column. 

By default, the EJ2 Grid column only supports number, string, date, dateTime, Boolean type values, and which is not supported array type value. Please refer to the below documentation.  

  

Documentation: https://helpej2.syncfusion.com/react/documentation/api/grid/columnType/

We can show an array of values in the Grid column. But this is used only for the display purpose. We cannot perform Grid actions like Filtering, Searching, Grouping, Sorting, etc., to this column. Because the Grid can perform the actions (like sorting, grouping ,filtering) based on its dataSource value. This is the default behavior of EJ2 Grid. To enable filtering on a Grid column, ensure that the column's values are of one of the supported types listed above and for the date column the values must be Date objects, standard ISO 8601 format, or Microsoft format date strings as mentioned previously.

Regards,

Mohanraj Rengasamy

[Garima Jain]

hie the filter is of type menu for date time is not resolved 

  const filterSettings = {

    mode: 'Immediate',

    showFilterBarStatus: true,

    immediateModeDelay: 10,

    type: 'Menu',

  };

if filter is menu thn 

[Rajapandi Ravi]

Garima,

Thanks for your update.

We understand that you are using a Filter menu in the Grid and encountering an issue when filtering the date column. Upon reviewing the definition of your date column, we noticed the use of a custom date format. When using custom date format, you need to format the date value as follows with your own format value. Please refer to the sample and documentation link below for further details.

Index.js

 

 const formatOption = { type: 'dateTime', format: 'MM/dd/yyyy HH:mm:ss' };

 

<GridComponent

          dataSource={data}

          locale="en-US"

          allowFiltering={true}

          filterSettings={filterSettings}

          height={365}

        >

          <ColumnsDirective>

             .  .  .  .  .  .  .  .  .  .

             .  .  .  .  .  .  .  .  .  .

             .  .  .  .  .  .  .  .  .  .

            <ColumnDirective

              field="OrderDate"

              headerText="Order Date"

              width="250"

              type="datetime"

              format={formatOption}

              textAlign="Right"

              editType="datepickeredit"

            />

             .  .  .  .  .  .  .  .  .  .

             .  .  .  .  .  .  .  .  .  .

             .  .  .  .  .  .  .  .  .  .

        </GridComponent>

Sample: https://stackblitz.com/edit/react-u24z4cqm-wlsrambc?file=index.js

Documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/columns#date-formatting

Screenshot:

If still you are facing an issue, please share the below details

1)            Share any issue reproducible sample or try to reproduce the issue with our shared sample that would be helpful for us to provide better solution.

2)            Share the actual data format coming from your backend for your date column.

3)            Share your Syncfusion package version.