Autocomplete within grid with Remore Data

Question

I have an auto complete cell within parent/child grid.

Below is my code. However if i add executequery against datamanager. It does not allow. since API which i am hitting is SharePoint REST API. and it does not allow tolower in search which i am getting if i dont pass my own search. I end up getting failed request while i type my search. Can I add search in my Odata query it self. if yes, then how can i access data (typed in auto complete box). also, how do i modify the execute query. which is throwing me an error. but if i remove this

.executeQuery(new Query().search('Byr', ['Title']))
            .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true),

then everything works as expected

{ field: 'Name', headerText: 'Name', textAlign: 'Left', type:'string',
      edit: { 
        create: function () { 
          elem = document.createElement('input'); 
          return elem; 
        }, 
        read: function () { 
          return dObj.value; 
        }, 
        destroy: function () { 
          //dObj.destroy(); 
        }, 
        keydown:function(args){
          console.log(args);
        },
        write: function (args) { 
          let columnName="Title";
          let term="Byr";
          //$filter=substringof('" + term + "'," + columnName + ") eq true
          dObj =new AutoComplete({ 
            dataSource: new DataManager({
              url: "/_api/web/siteusers?$select=Title", 
              adaptor: new ODataAdaptor(),
              crossDomain: true, 
              headers: [{"accept": "application/json;odata=verbose" }] 
            }).executeQuery(new Query().search('Byr', ['Title']))
            .then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true),
            fields:{"text":"Title","value":"Title"},
            value: args.rowData["Title"] ? args.rowData["Title"] : "", 
          }); 
          dObj.appendTo(elem); 
        } 
      }
      ,width: 150,isFrozen:false,allowResizing:true},

Pavithra Subramaniyam · Answer

Hi Parth, 

Thanks for contacting Syncfusion support. 

From your query we understood that you want to customize your API query with the typed value in AutoComplete component. If yes you can achieve your requirement by using the custom adaptor inside which you can modify the query string a s below. Please refer to the bellow code example, documentation and sample link for more information. 





class CustomAdaptor extends ODataAdaptor { 
  public convertToQueryString( 
    request: Object, 
    query: Query, 
    dm: DataManager 
  ): string { 
// request will have the filter query. 
  // you can change it with the below value 
    let value = document.getElementById('NormalgridCustomerID').ej2_instances[0] 
      .typedString; 
    let original: string = super.convertToQueryString.apply(this, arguments); 
    return original; 
  } 
} 
export class AppComponent {   
 
  public columns: Object[] = [ 
    { 
      field: 'CustomerID', 
      headerText: 'Customer ID', 
      validationRules: { required: true }, 
      width: 140, 
      type: 'string', 
      edit: { 
        .  .  . 
        write: function (args) { 
          this.dObj = new AutoComplete({ 
            dataSource: new DataManager({ 
              url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders', 
              adaptor: new CustomAdaptor(), 
              crossDomain: true, 
              headers: [{ accept: 'application/json;odata=verbose' }], 
            }), 
            fields: { text: 'CustomerID', value: 'CustomerID' }, 
            value: args.rowData['CustomerID'] ? args.rowData['CustomerID'] : '', 
          }); 
          this.dObj.appendTo(this.elem); 
        }, 
      }, 
    }, 
  ]; 


Documentation: https://ej2.syncfusion.com/angular/documentation/data/adaptors/#writing-custom-adaptor 

Sample               : https://stackblitz.com/edit/angular-kkrtst?file=app.component.ts 

Please get back to us if you have any queries. 

Regards, 
Pavithra S

PDev · Answer

Somehow I am not able to make this work. why it keeps adding other filters at the end ?

 cols.push(
      { field: 'ResourceName', headerText: 'Resource Name', textAlign: 'Left', type:'string',
      edit: { 
        create: function () { 
          this.elem = document.createElement('input'); 
          return this.elem; 
        }, 
        read: function () { 
          return this.dObj.value; 
        }, 
        destroy: function () { 
          //dObj.destroy(); 
        }, 
        keydown:function(args){
          console.log(args);
        },
        write: function (args) { 
          let term="Byr";
          let columnName="Title";
          this.dObj = new AutoComplete({
            dataSource: new DataManager({
              url: "https://teams.mdlz.com/_api/web/siteusers?$filter=substringof('" + term + "'," + columnName + ") eq true",
              adaptor: new CustomAdaptor(),
              crossDomain: true,
              headers: [{ accept: 'application/json;odata=verbose' }],
            }),
            fields: { text: 'Title', value: 'Title' },
            value: args.rowData['ResourceName'] ? args.rowData['ResourceName'] : '',
          });
          this.dObj.appendTo(this.elem);

Pavithra Subramaniyam · Answer

Hi Parth, 

The additional filter string is the one with the typed value in the AutoComplete component. If you want to remove this default filtering you can remove the $filter inside the custom adaptor function as given below. 





class CustomAdaptor extends ODataAdaptor { 
  public convertToQueryString(request: Object, query: Query, dm: DataManager): string { 
    delete request.$filter; 
    let value = document.getElementById('NormalgridCustomerID').ej2_instances[0] 
      .typedString; 
    debugger; 
    let original: string = super.convertToQueryString.apply(this, arguments); 
    return original; 
  } 
} 


Sample : https://stackblitz.com/edit/angular-kkrtst-cnjcpd?file=app.component.ts 

Please get back to us if you have any queries. 

Regards, Pavithra S