1. Home
  2. Forum
  3. React - EJ 2
  4. Error on using DropdownList in Grid FilterBar

Error on using DropdownList in Grid FilterBar

Hi

I am using Grid in React typescript project and in one of the fields I want to use DropDownListComponent in the filter bar template. I have made a sample in the below link. I am getting an error on changing the value in dropdownlist component. In this sample I have not filtered but just logged in the console to make it simple to show the error.


Please help me on this. Thanks for your help in advance.

7 Replies
VS Vignesh Sivagnanam Syncfusion Team December 9, 2020 12:51 PM UTC

Hi Satheesh 

Greetings from Syncfusion support. 

We checked the attached sample and we can reproduce the mentioned issue while changing the value dropdown value in the filterbar template. To avoid the mentioned issue, we suggest you to use DropdownList instead of DropdownListComponent in the template. 

Please refer the below Code Example for your reference 

Code Example: 
const lookupObj = new DropDownList({ 
          change: e => { 
            console.log("e", e); 
          }, 
          dataSource: sportsData, 
          fields: { text: "Game", value: "Id" }  
        }); 

Please refer the below modified sample and Screeshot for your reference 


Screenshot: 
 

Please get back to us if you need further assistance. 
 
Regards, 
Vignesh Sivagnanam 


SK Satheesh Kumar December 10, 2020 10:01 AM UTC

Hi

Thanks for your support. Using DropdownList instead of DropdownListComponent worked for me. However my purpose of using is to have remote data with remote filtering and I have an issue when I filter (start typing) inside the dropdownlist filter text box. The data gets fetched from the server but not updated inside the list. You can check the following link. Start typing(like 'a') inside filter textbox of the dropdown.

https://stackblitz.com/edit/syncfusion-grid-edit-kwesdg

Thanks




VS Vignesh Sivagnanam Syncfusion Team December 11, 2020 01:15 PM UTC

Hi Satheesh 

Thanks for the update 

Based on your query we found that you are not able to filter the values in dropdownlist in Filterbar template. 

To display filtered items in the popup, filter the required data and return it to the DropDownList via updateData method by using the filtering event. The following sample illustrates how to query the data source and pass the data to the DropDownList through the updateData method in filtering event. 

Please refer the below code example and Sample for your reference, 

Code Example:  
write: args => { 
        const lookupObj = new DropDownList({ 
          change: e => { 
            console.log("e", e); 
          }, 
          dataSource: this.searchData, 
          fields: { text: "Country", value: "CustomerID" }, 
          allowFiltering: true, 
          filtering: e => { 
            let query = new Query().select(["Country", "CustomerID"]); 
            query = 
              e.text !== "" 
                ? query.where("Country", "startswith", e.text, true) 
                : query; 
            e.updateData(this.searchData, query); 
          } 
        }); 
        const objElement = document.querySelector("#" + args.element.id); 
        lookupObj.appendTo("#" + args.element.id); 
      } 


Screenshot:  
 

Regards 
Vignesh Sivagnanam 


SK Satheesh Kumar December 14, 2020 04:19 AM UTC

Hi

Thanks again for the update and your excellent support. This works when I have the dropdown datasource locally. However my dev team now wants to have remote datasource with remote filtering. This is because we have more than one column in the grid which has to be a dropdown and fetching data for all these columns and keeping it locally has a performance issue when the grid is also loaded from remote. Do you have any sample to achieve this? Also the remote datasource for the dropdown is a post method which needs some additional data in the post request. 


Thanks.

VS Vignesh Sivagnanam Syncfusion Team December 15, 2020 10:28 AM UTC

Hi Satheesh 

Thanks for the update. 

Based on your query that you need the dropdown as a remote dataSource with remote filtering. In previous update we have provided the sample in remote dataSource with remote filtering to the dropdown in the filterbar.  

Please refer the below Code Snippet for your reference, 

searchData = new DataManager({ 
    adaptor: new ODataV4Adaptor(), 
    crossDomain: true, 
  }); 
………….. 
………….. 
dataSource: this.searchData, 

If we misunderstood your query, please share the following details, 

1. Share the complete Grid rendering code. 

2. In this you also mentioned that you needs some additional data in the post request. So, please confirm that you need to send the additional parameter with the dropdown remote data? 

3. Please explain your exact requirement scenario with detailed description so that we can check from our end and provide the proper solution for it. 

Regards, 
Vignesh Sivagnanam 


SK Satheesh Kumar December 15, 2020 11:01 AM UTC

Hi

Thanks again. My remote datasource is a .net core app with HTTP post method which accepts HTTP request data. And it returns output in the format 
{result:[{Id:1,Name:'Name 1'},{Id:2,Name:'Name 2'}.......],count:10}


In the react app I tried using the UrlAdaptor as it is a POST method.

customerData: DataManager = new DataManager({
        adaptor: new UrlAdaptor(),
        crossDomain: true,
        url: "...",
        requestType: "POST",
        //data:  {
        //    ContainsText: containsText,
        //    Skip: 0,
        //    Take: 25
        //},
        enableCaching: true,
        //offline: true
    });


Here I want to send 3 additional data -Skip,Take and ContainsText(which is the filtered text).



1. I am not able to send these data 
2. For the dropdown I am not able to use the output returned by API which is in the format given above
3. I have more than 1 column in the grid which has to use the above API except for separate url for each column



Thanks

VS Vignesh Sivagnanam Syncfusion Team December 17, 2020 02:17 PM UTC

Hi Satheesh 

Sorry for the late reply 

Based on your query we suspect that you want to set additional parameters to the dropdown dataSource server side method.  So, we suggest you to send your required additional params to the dropdown’s query property.  

Please refer to the below code and screenshots. 

public searchData = new DataManager({ 
    adaptor: new UrlAdaptor(), 
    crossDomain: true, 
      url: "Home/UrlDatasource1", 
      requestType: "POST" 
  }); 
………. 
write: (args: { element: Element, column: Column }) => { 
            const lookupObj = new DropDownList({ 
                change: e => { 
                    console.log("e", e); 
                }, 
                dataSource: this.searchData, 
                fields: { text: "ShipCountry", value: "ShipCountry" }, 
                allowFiltering: true, 
                filtering: this.onFiltering.bind(this), 
                query: new Query().addParams('Skip', '0').addParams('Take', '5') 
            }); 
            const objElement = document.querySelector("#" + args.element.id); 
            lookupObj.appendTo("#" + args.element.id); 
          } 

Screenshot :  
 

Regards 
Vignesh Sivagnanam 


Loader.
Up arrow icon