How to stop auto select of Select all option on filtering

Question

Hi team, as per the default behavior of the Grid filter of type checkbox, once we search for something in the filter box, it will select the Select All option by default.

But, I want to prevent it and give the user flexibility to select after filtering. Please let me know how can I do the same.

Also how to Remove the option - "Add current selection to filter"?

Waiting for a quick solution.

Thanks

Animesh Dutta · Answer

Team, waiting for your response. Please have a look.

Rajapandi Ravi · Answer

Animesh,By default when we type something in the search box of
filter dialog, since the searched values are in checked state so that the
Select All also checked. It was the default behavior. We have removed the “Add current selection to filter” option
by using the actionComplete event of Grid. Please refer the below code example
and sample for more information.

function actionComplete(args) { //actionComplete event of Grid
         
  if(args.requestType === 'filterchoicerequest') {
        
       args.filterModel.dlg.querySelector('.e-checkboxlist').children[1].remove();
          }
      }

Sample: https://stackblitz.com/edit/react-qwqbas?file=index.js

Animesh Dutta · Answer

Thanks for the response.But can we make the searched values in the unchecked state by default? How this can be achieved?Thanks

Rajapandi Ravi · Answer

Animesh,You can
achieve your requirement by programmatically click the selectAll checkbox in
the actionComplete event of Grid. Please refer the below code example and
sample for more information.

function actionComplete(args) { //actionComplete event of Grid
         
  if(args.requestType === 'filterchoicerequest' && args.filterModel.dlg.querySelector('.e-searchinput').value.length
  > 0) {
              args.filterModel.dlg.querySelector('.e-checkboxlist').children[1].remove();
              args.filterModel.dlg.querySelector('.e-checkboxlist').children[0].querySelector('input').click();
          }
      }

Sample: https://stackblitz.com/edit/react-qwqbas-ckn17h?file=index.js

Animesh Dutta · Answer

Thanks it's working fine.

Rajapandi Ravi · Answer

Animesh,We are glad to hear that our provided solution was working
fine at your end.Please get back us if you need any further assistance.

Sreevatsan · Answer

function actionComplete(args) { //actionComplete event of Grid

if(args.requestType === 'filterchoicerequest' && args.filterModel.dlg.querySelector('.e-searchinput').value.length > 0) {

args.filterModel.dlg.querySelector('.e-checkboxlist').children[1].remove();

args.filterModel.dlg.querySelector('.e-checkboxlist').children[0].querySelector('input').click();

}

}

But this also removes the the first filter option when loaded. For example if there are four filter keys, it will show only 3.

Santhosh Iruthayaraj · Answer

Hi Sreevatsan,You can address the current scenario by introducing a
condition to verify the existence of the "Add current selection to
filter" checkbox option before attempting to remove it. Please find the
updated code snippet and a sample for your reference below:

[index.js]
   
    function actionComplete(args) {
      if (args.requestType === 'filterchoicerequest' && args.filterModel.dlg.querySelector('.e-searchinput').value.length > 0) {
        const checkboxList = args.filterModel.dlg.querySelector('.e-checkboxlist');
   
        checkboxList.children[0].querySelector('input').click();
   
        const addCurrent = checkboxList.querySelector('.e-add-current');
        if (addCurrent) addCurrent.closest('.e-ftrchk').style.display = 'none';
      }
    }

Sample: https://stackblitz.com/edit/react-qwqbas-jbkev1g5Regards,Santhosh I