Grid Queries: OData example, excel filter query reason, date format error

[Joshua Dunn]

Hi,

Query 1)

Do you have an example of using the "Excel like" filters with a remote OData data source?

All of your examples seem to use a local data source and I want to see what happens when using a remote data source in this case.

Query 2)

It seems that whenever a filter is clicked, 1000 records are queried from the database, regardless of the column.

Since the data is already loaded into the grid, why is it required to query it again?

Query 3)

When I return data from the excel filter query to the dataSource function, if my field is a date, I get an error in the file dateFormatter.js:

Uncaught (in promise) TypeError: value.getDate is not a function

What format is expected here?

Thanks.

[Sujith Kumar Rajkumar]

Hi Joshua, 

Greetings from Syncfusion support. 

You can find the response for your queries below, 

Query – 1: “Do you have an example of using the "Excel like" filters with a remote OData data source?” 

As per your requirement we have prepared a Grid sample with OData adaptor and Excel filtering enabled. You can find it below, 

Sample: https://codesandbox.io/s/vue-3kv48?file=/src/App.vue 

Query – 2: “It seems that whenever a filter is clicked, 1000 records are queried from the database, regardless of the column. Since the data is already loaded into the grid, why is it required to query it again?” 

 

When remote data is bound to the Grid, a request for getting the records to be displayed in the filter dropdown list will be sent each time the filter dialog is opened. This is because when remote adaptor is bound to the Grid, all the data required for processing needs to be returned from the server as this is its use case. The request for 1000 records is the default value set in the source for fetching filter records. However this value can be modified if needed by changing the filterChoiceCount argument value in the actionBegin event when the requestType is ‘filterchoicerequest’ as demonstrated in the below code snippet, 

// Grid’s actionBegin event function 

function onActionBegin(args) { 

        if (args.requestType === "filterchoicerequest") {‘ 

            // Filter choice count is modified 

            args.filterChoiceCount = 200; 

        } 

} 

 

Query – 3: “When I return data from the excel filter query to the dataSource function, if my field is a date, I get an error in the file dateFormatter.js:Uncaught (in promise) TypeError: value.getDate is not a function. What format is expected here?” 

 

For this case, you can return the date values in Date format as displayed in the below image, 

 

 

 

This can be checked in the sample shared above. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Joshua Dunn]

Hi,

Thanks for the reply.

Query 2)

Thanks, I can see why that query is sent, to get all available options for filtering. Seems strange to return every field when only the one being filtered on is required for your checkboxes however.

Query 3)

In the case I am not using Odata and the date is actually returned as a string, what can I do to get this to work correctly?

Thanks,

Josh

[Sujith Kumar Rajkumar]

Hi Joshua, 

 

The entire data needs to be returned for the filter checkboxes case also which as we mentioned in our previous update is the default behavior based on the Grid’s current architecture. 

 

As for your other query – “In the case I am not using Odata and the date is actually returned as a string, what can I do to get this to work correctly?”,  you can resolve this by converting the date string values to date objects in the data(To be assigned to the Grid). This can be achieved by using the Syncfusion data component’s DataUtil parseJson method to parse the data before assigning it to the Grid’s data source as demonstrated in the below code snippet, 

 

<template> 

    <div id="app"> 

        <ejs-grid :dataSource="data"> 

            ---- 

        </ejs-grid> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin} from "@syncfusion/ej2-vue-grids"; 

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

import { data } from "./datasource"; 

 

Vue.use(GridPlugin); 

 

export default { 

  name: "app", 

  data() { 

    return { 

      data: DataUtil.parse.parseJson(data), 

    } 

  } 

} 

</script> 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R