Not getting the value in change event while data Filtering

Question

HiI am using the Multiselect Dropdown.I am facing the following issue.I am using checkbox based multi-select dropdown. I am getting the values in the change function without doing the filter method.If I am filtering any data using a search box, and click the checkbox on the particular selected data and I didn't get the value in the change function it shows null.

Sevvandhi Nagulan · Accepted Answer

Hi Raja,

You can change the filtering type using filterType property. Please refer the below code,

<MultiSelectComponent

id="checkbox"

ref={scope => {

this.mulObj = scope;

}}

dataSource={this.countries}

fields={this.checkFields}

placeholder="Select countries"

mode="CheckBox"

filtering={this.onFiltering.bind(this)}

showDropDownIcon={true}

filterBarPlaceholder="Search countries"

popupHeight="350px"

change={this.onChange.bind(this)}

filterType="Contains"

enableGroupCheckBox="true"

>

</MultiSelectComponent>

Please find the sample below,

Sample link: https://stackblitz.com/edit/react-y8vckr-f7ukxt?file=index.js

Please check the above sample and get back to us if you need further assistance.

Regards,

Sevvandhi N

Ponmani Murugaiyan · Answer

Hi Raja, 

Greetings from Syncfusion support. 
We have prepared sample based on your provided details and ensured in our end. But unfortunately the issue is not replicated in our end. Please find the sample and video demonstration for your reference. 

Sample: https://stackblitz.com/edit/react-y8vckr-pbrnvr?file=index.js  

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_24-12-2020_3.30.13_PM.mp41144137929  

Kindly check with the above sample and video. If issue still exists or if we misunderstood the query, please revert us with the below details,  


Dropdowns package version.
Share control rendering code snippet.
Whether used custom filtering, if so share filtering method code. 
If possible try to replicate the issue in the above provided sample.

The above requested details will helps us to check and provide you the solution at earliest. 

Regards, 
Ponmani M

Raja Gopal · Answer

Hi Ponmani,Hope you are doing good,I try with your example by "group by" method and using the "contains" filter method instead of "start". The filter isn't done.  Sample Demo: https://stackblitz.com/edit/react-y8vckr-p8ok3i?file=index.jsThanks

Raja Gopal · Answer

Hi,Thanks for your help.the filtering is working fine now.I have another 1 doubt alsoIs there any option available for getting data on checkbox selection time. Now I am getting the values in the change event. In this method I need to select the checkbox and need to click outside of the section, then only I got the values.If I am using the select event, In that method I will able to get the individual value. In the same select event, If I am clicking select all, I didn't get the values.Can you clarify, Is there any option available for getting data on checkbox selection time.?

Raja Gopal · Answer

Is there any option available for the group collapse option? inside the multi-select component.

Sevvandhi Nagulan · Answer

Hi Raja, Query 1: If I am using the select event, In that method I will able to get the individual value. In the same select event, If I am clicking select all, I didn't get the values. Response: You can use the selectedAll event when click on the select all. Refer to the below code, { this.mulObj = scope; }} dataSource={this.countries} fields={this.checkFields} placeholder="Select countries" mode="CheckBox" filtering={this.onFiltering.bind(this)} showDropDownIcon={true} filterBarPlaceholder="Search countries" popupHeight="350px" change={this.onChange.bind(this)} selectedAll={this.onSelectAll.bind(this)} showSelectAll={true} filterType="Contains" enableGroupCheckBox="true" > Please find the sample below, Sample link: https://stackblitz.com/edit/react-y8vckr-f7ukxt?file=index.js Query 2: Is there any option available for the group collapse option? inside the multi-select component. Response: We don’t have collapse option for grouping. Hence we suggest to use the treeview component for this requirement. Demo link: https://ej2.syncfusion.com/react/demos/#/material/treeview/check-box Regards, Sevvandhi N

Raja Gopal · Answer

Dear Sevvandhi,Thanks for your reply,In the select event, how can I get the values for group select like If I select the country group in the above example? If I select the Country group, How can I get the values inside the county in the Select event?I also tried the Treeview component method. but that method already I asked 1 query, I didn't get the response from your side.Tree View query URL : https://www.syncfusion.com/forums/159852/how-to-enable-the-nested-level-multiselectThanks and RegardsRaja

Sevvandhi Nagulan · Answer

Hi Raja, 


Query 1: In the select event, how can I get the values for group select like If I select the country group in the above example?  

If I select the Country group, How can I get the values inside the county in the Select event? 


We prepared the sample based on the requested requirement. We get the corresponding group values by comparing to the previous group. Since the select event triggered for every item if you click the  group item checkbox. Refer to the below code, 





  onSelect(args) { 
    if (!this.isFirst && !this.groupValues.includes(args.itemData.Name)) { 
      this.previousGroup = args.itemData.group; 
      this.groupValues.push(args.itemData.Name); 
    } else if ( 
      this.previousGroup == args.itemData.group && 
      !this.groupValues.includes(args.itemData.Name) 
    ) { 
      this.groupValues.push(args.itemData.Name); 
    } else if ( 
      this.previousGroup != args.itemData.group && 
      !this.groupValues.includes(args.itemData.Name) 
    ) { 
      this.previousGroup = args.itemData.group; 
      this.groupValues = []; 
      this.groupValues.push(args.itemData.Name); 
    } 
    this.isFirst = true; 
    console.log(this.groupValues); 
  } 



Please find the sample below, 

Sample link: https://stackblitz.com/edit/react-y8vckr-f7ukxt?file=index.js 


Query 2: I also tried the Treeview component method. but that method already I asked 1 query, I didn't get the response from your side. 

Tree View query URL : https://www.syncfusion.com/forums/159852/how-to-enable-the-nested-level-multiselect 


Could you please provide the requirement which we missed to address?. Based on the information we will check the query and provide the details accordingly. 


Regards, 
Sevvandhi N

Raja Gopal · Answer

Dear Sevvanthi,thanks for your reply.this select and select all method is not exactly like the change method.in the sample code, If I click one particular group like country means, It will get the entire country, same as if I click state group means I will get the state group values.but assume If I have 5 different groups, instead of select all methods, I need to select only 3 groups means, your code returns the latest selected group values only, but in UI it will mark 3 groups.same time If I didn't get the values in the Unselect method.but change method It will return all values based on user select and UI also it shows correctly.Can you please provide a sample like If I selected group values? like instead of 5 groups if I select 3 groups means to return the 3 groups values instead of last selected group value. and in that 3 selected groups if I unselect 1 particular group means it will return the remaining selected 2 group values?

Sevvandhi Nagulan · Answer

Hi Raja,

We checked your query. We suggest that to you can bind the click event to group element. Also, please use the code below to choose whether or not the group element is clicked. Please refer the below code.

onOpen(args) {

setTimeout(() => {

var groupItem = args.popup.element.querySelectorAll(

".e-list-group-item "

);

for (var i = 0; i < groupItem.length; i++) {

groupItem[i].addEventListener("click", function(e) {

if(e.target.classList.contains('e-check')) {

console.log("Group element is checked");

}

else {

console.log("Group element is un checked");

}

});

}

}, 50);

}

Please find the sample below.

Sample link: https://stackblitz.com/edit/react-y8vckr-llvw4d?file=index.js

Please check the sample and get back to us if you need further assistance.

Regards,

Sevvandhi N

Raja Gopal · Answer

Dear Sevanthi,Thanks for your support.

Prince Oliver · Answer

Hi Raja, 

Most welcome, we are glad to assist you. 

Regards, 
Prince

Raja Gopal · Answer

In Checkbox with Grouping methodIs there any event to identify the group selection instead of select Individual select?https://stackblitz.com/edit/react-y8vckr-f7ukxt?file=index.js Is there any event to identify in the above example if I click the country? Thanks

Sevvandhi Nagulan · Answer

Hi Raja, 


We checked the reported requirement. The select event will be triggered when clicking on the country checkbox. When click on the group checkbox, items in that group will be selected. If the item is selected, then select event will be triggered for the all item. Please check these details and if the deatils does not help you, please share the use case scenario for the reported requirement. Based on the details we will check the other possibilities to achieve your requirement in our end. 


Regards, 
Sevvandhi N

Raja Gopal · Answer

Dear Sevvandhi,Hope you are doing goodhttps://stackblitz.com/edit/react-y8vckr-kr5wrl?file=index.jsIn the above-attached workaround, if you click the Select all check box,  in the console section you will get true or false. Same Like Is there any event available to get true or false while selecting Group like Country or State?Thanks

Sevvandhi Nagulan · Answer

Hi Raja, 


We checked your query. We suggest that to you can bind the click event to group element.  Also, please use the code below to choose whether or not the group element is clicked. Please refer the below code. 






      onOpen(args) { 
        setTimeout(() => { 
          var groupItem = args.popup.element.querySelectorAll( 
            ".e-list-group-item " 
          ); 
          for (var i = 0; i < groupItem.length; i++) { 
            groupItem[i].addEventListener("click", function(e) { 
             if(e.target.classList.contains('e-check')) { 
               console.log("Group element is checked"); 
             } 
             else { 
                console.log("Group element is un checked"); 
             } 
            }); 
          } 
        }, 50); 
      } 



Please find the sample below. 


Sample link: https://stackblitz.com/edit/react-y8vckr-llvw4d?file=index.js 


Please check the sample and get back to us if you need further assistance. 


Regards, 
Sevvandhi N

Raja Gopal · Answer

Hi,your sample link doesn't print the console.

Sevvandhi Nagulan · Answer

Hi Raja, 
 
 
We modified the provided code and attached it below. However, we suggest that you to increase the timeout and ensure the reported issue. Please refer the below code. 
 
 




      setTimeout(() => { 
        var groupItem = args.popup.element.querySelectorAll( 
          ".e-list-group-item " 
        ); 
        for (var i = 0; i < groupItem.length; i++) { 
          groupItem[i].addEventListener("click", function(e) { 
            if (e.target.classList.contains("e-active")) { 
              console.log("Group element is checked"); 
            } else { 
              console.log("Group element is un checked"); 
            } 
          }); 
        } 
      }, 100); 
 
 
 
Please find the sample below. 
 
 
Sample link: https://stackblitz.com/edit/react-y8vckr-ynsgfn?file=index.js 
 
 
Please get back to us if you need further assistance. 
 
 
Regards, 
Sevvandhi N