How to implement Filter Search while using Remote API integration.

[Unknown]

Title  - How to implement Filter Search while using Remote API integration.

 

Hi team,

 

We are trying to use syncfusion vue grid with Remote api integration. The grid is able to be successfully loaded with infinite scroll after remote api fetch . However we are facing issue while integrating  filters for grid columns.The filter search is not working while the filter values are fetched from remote api. ( Note that the filter values are initially loaded by default by using the same remote api without the search params)

syncfusion/ej2-vue-grids: 18.2.48 (version)

Filter API Request payload  : {"filterField":"clientName","filters":[],"searchValue":"%abc%"}

 

Filter API Response : {"status":200,"token":null,"messages":[],"result":{"data":["ABC Company","ABC Corp","ABC HUB","ABC S Client"],"filterField":"clientName"},"traceId":"00000000-0000-0000-0000-000000000000"}

 

Code snippet :

CUSTOM ADAPTOR

import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';

import { FilterDataRequestViewModel, ProjectListRequestViewModel } from '@/service/api';

 

export default class SerialNoAdaptor extends WebApiAdaptor {

  // eslint-disable-next-line

  processResponse(): Object {

    // calling base class processResponse function

    // eslint-disable-next-line

    const original: any = super.processResponse.apply(this, arguments as any);

    let test;

 

    if (original.result.filterField) {

      const filtersTemp = JSON.parse(localStorage.getItem('gridFilter') || '[]');

      const tempFilter = filtersTemp.reduce((acc: any, next: any) => {

        const accTemp = { ...acc, [next.filterName]: next.filterValues[0] };

        return accTemp;

      }, {});

      test = original.result.data.map((f: any) => ({

        [original.result.filterField]: f,

        ...tempFilter,

      }));

      test = { result: test, count: test.length };

    } else {

      test = { result: original.result.projects, count: original.result.totalRecord };

    }

    console.log(JSON.stringify(test));

    return test;

  }

 

  processQuery(dm: DataManager, query: Query, hierarchyFilters?: any[]): any {

    const onTake = query.queries.find((e) => e.fn === 'onTake');

    const queryTemp: any = super.processQuery(dm, query, hierarchyFilters);

    let filters: any = [];

    let endpoint = '';

    let searchValue = '';

    let data = {};

    if (onTake) {

      const onSearch = query.queries.filter((q) => q.fn === 'onWhere')[0];

      if (onSearch?.e?.value) {

        searchValue = `%${onSearch.e?.value.toString()}%`;

      }

      endpoint = '/api/projects/filter';

      const filtersTemp = JSON.parse(localStorage.getItem('gridFilter') || '[]');

      const filterField = query.distincts[query.distincts.length - 1];

      data = {

        ...data,

        filterField,

        filters: filtersTemp,

        searchValue,

      };

    } else {

      endpoint = '/api/projects/list';

      const temp = query

        .queries

        .filter((q) => q.fn === 'onWhere')[0];

      if (temp && temp.e && temp.e.predicates) {

        const { predicates } = temp.e;

        let filterTemp: any[] = [];

        predicates.map((x) => {

          if (x.predicates) {

            filterTemp = [...filterTemp, predicates[0].predicates.reduce((acc, next) => {

              const accTemp = acc;

              accTemp.filterName = next.field;

              accTemp.filterType = next.operator;

              accTemp.filterValues = [...accTemp.filterValues, next.value] as any;

              return accTemp;

            }, {

              filterName: '',

              filterType: '',

              filterValues: [],

            })];

          } else {

            filterTemp = [...filterTemp, {

              filterName: x.field,

              filterType: x.operator,

              filterValues: [x.value],

            }];

          }

          return x;

        });

        filters = filterTemp;

      }

 

      let sortBy = [

        { fieldName: 'updatedDate', sortType: 'desc' },

      ];

      const onSort = query.queries.filter((q) => q.fn === 'onSortBy')[0];

 

      if (onSort) {

        const sortType = onSort.e?.direction as string === 'ascending' ? 'asc' : 'desc';

        sortBy = [

          { fieldName: onSort.e?.fieldName as string, sortType },

        ];

      }

 

      const onPage = query.queries.find((e) => e.fn === 'onPage');

      const pageIndex = onPage?.pageIndex ? onPage?.pageIndex : 0;

      const pageSize = onPage?.pageSize ? onPage?.pageSize : 0;

      const take = pageSize;

      const skip = pageSize * pageIndex - pageSize;

      data = {

        filters, sortBy, take, skip,

      };

      localStorage.setItem('gridFilter', JSON.stringify((data as any).filters));

    }

    queryTemp.data = JSON.stringify(data);

    queryTemp.type = 'POST';

    queryTemp.url = process.env.VUE_APP_PROJECT_API_URL + endpoint;

 

    return queryTemp;

  }

}

 

 

DATAMANGER:

getTradeData = new DataManager({

    url: `${process.env.VUE_APP_PROJECT_API_URL}/api/projects/list`,

    adaptor: new SerialNoAdaptor(),

    headers: [{ Authorization: `Bearer ${this.getTokenFromCookie()}` }],

    crossDomain: true,

    offline: false,

  });

please find the attachment 

 

 

Attachment: sync_c29bcb42.zip

[Thiyagu Subramani]

Hi jishu, 

Thanks for contacting Syncfusion forum. 

Based on your query you faced an issue in a filter search while using Remote API integration. We checked the attached documents and screenshots, but we proceed with this query we need the following details, 

1. Are you facing this filter search issue only in string column or all columns? 

2. Share complete grid rendering code. 

3. Syncfusion package version. 

4. With the attached screenshot we found that it is not our default excel filter popup. So, please confirm have you use any customization in popup 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S