Guest User

dropdownlist filtering bug

a guest
Aug 26th, 2019
94
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { enableRipple } from '@syncfusion/ej2-base';
  2. enableRipple(true);
  3.  
  4. /**
  5.  * DropDownList Filtering Sample
  6.  */
  7. import { DropDownList, FilteringEventArgs } from '@syncfusion/ej2-dropdowns';
  8. import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
  9. import * as data from './dataSource.json';
  10.  
  11. var searchData = new DataManager({
  12.     url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
  13.     adaptor: new ODataV4Adaptor(),
  14.     crossDomain: true,
  15.     // offline: true
  16. });
  17.    
  18.     // initialize DropDownList component  
  19.     let dropDownListObj: DropDownList = new DropDownList({
  20.         // set the placeholder to DropDownList input element
  21.         placeholder: 'Select a country',
  22.         query: new Query().select(['ContactName', 'CustomerID']),
  23.         // set the placeholder to filter search box input element
  24.         filterBarPlaceholder: 'Search',
  25.         //set the local data to dataSource property
  26.         dataSource: searchData,
  27.         // map the appropriate columns to fields property
  28.         fields: { text: 'ContactName', value: 'CustomerID' },
  29.         // set the height of the popup element
  30.         popupHeight: '250px',
  31.         // set true for enable the filtering support.
  32.         allowFiltering: true,
  33.         filterType: 'EndsWith',
  34.         // bind the filtering event
  35.         filtering: (e: FilteringEventArgs) => {
  36.             let query: Query = new Query();
  37.             // frame the query based on search string with filter type.
  38.             query = (e.text !== '') ? query.where('ContactName', 'contains', e.text, true) : query;
  39.            
  40.             console.log(e.text);
  41.             // pass the filter data source, filter query to updateData method.
  42.             e.updateData(searchData, query);
  43.         }
  44.     });
  45.     dropDownListObj.appendTo('#country');
RAW Paste Data