Filter in 5.2.0 custom select-dropdown

[applepqgrid]

Hi

We have recently upgraded to 5.2.0 and as part of migration we have changed the existing code as per the API 5.2.0 where we have  created the pqgrid with:
Code: [Select]
               
               filter: {

                   type: "select",
                   init: function() {
                      $(this).pqSelect({radio: true});
                        },
                   crules: [{condition: "equal"}],
                   valueIndx: "value", labelIndx: "text",
                   mapIndices: {"text": "text", "value": "value"},
                   options: [{'text': 'All', 'value': ''}, {'text': 'Yes', 'value': 'true'}, {'text': 'No', 'value': 'false'}],
                   listeners: ['change']
                }

In the header section, I need a select box which shows given options with pqSelect plugin, but it is still displaying the default text box. Please suggest an alternate method for this.
NOTE: The above code was working in previous version.

Thanks

[paramvir]

pqSelect is no longer supported in filter row ( as mentioned in upgrade guide ).

In v5.2.0, you can remove all parameters beside crules: [{condition: "equal"}] in filter definition and let the grid provide default UI.

If you need a dropdown, then you would require condition: 'range' instead of condition: 'equal'.

Here is an example to customize filter in various ways:

https://paramquery.com/pro/demos/filter_custom

[pqgridprouser1]

Is there any other options to customize the default UI (such as replacing the <input type='text'> to <select>...</select>) for drop down in filter select in the header section. Please suggest.
Note: Searched API v5.2.0, but could not find any options.

Thanks

[paramvir]

In v5.2.0, filter UI is dependent upon condition and dataType of column.

though it's possible to replace <input type='text'> by <select>...</select> with jQuery in filter.init callback, it is a workaround and not the intended purpose of init callback.

Code: [Select]

init: function(ui){
var grid = this;
ui.$editor.replaceWith("<select><option value=''>All</option><option>true</option><option>false</option></select>");
ui.$cell.find('select').change(function(){
grid.filter({
oper:"add",
rule:{dataIndx:ui.dataIndx, condition:'equal',value:$(this).val()}
});
})
}

Just a suggestion: Why not use range condition and use inbuilt dropdown provided by grid.

https://paramquery.com/pro/demos/filter_header_local

[pqgridprouser1]

As per your suggestion, I have used range but the menu UI displayed is it customizable, if yes then please suggest a way/example to customize the menu for range similar to a native dropdown menu with radio button instead of check boxes.

[paramvir]

yes it's customizable.

callback function has been assigned to column.filterFn in ShipCountry column so that only one checkbox can be selected at at time

in this example https://paramquery.com/pro/demos/filter_custom

[pqgridprouser1]

Hi,

The single selection  for drop down is done with filter function but the values are displayed are true, false and blank instead of Yes, No and All and l I tried using labelIndex:”text” and valueIndex:”value” if using the previous vintage options.Please can you suggest me on changing the values.



Thanks.

[paramvir]

true/false can be mapped to "Yes", "No" as below:

Code: [Select]

options: [
{"": ""},
{true:'Yes'},
{false:'No'}
]

Blanks is not equivalent to "All".

Blanks means cells with null, undefined values.

All means cells with any value which can be achieved by clearing the filter or unchecking the checkbox in dropdown.

[pqgridprouser1]

HI

The range filter dropdown is displaying true and false in the drop down. While clicking on either true or false, the data is filtered in the table, but the values of this drop down is also changing in both the modes that is view and edit. Please check the screenshots in the attachment.

To resolve i have tried editable:false in gridOptions for filter:{} in colModel object, but still it is not working as expected.

[paramvir]

There is no edit mode in filter dropdowns, they already have editable: false in there colModel definitions, and it's not clear from the screenshot about edit/view modes.

Could you please share a jsfiddle/plnkr so that I can look into it.

[applepqgrid]

One more thing..Mapping the options from 'true' to 'Yes' and 'false' to 'No' is working. But after choosing the value, search text still showing true/false. We wants that to be Yes/No. Can you please suggest how we can do that?


options: [
   {"": ""},
   {true:'Yes'},
   {false:'No'}
]

[paramvir]

Instead of mapping, column.format callback can be used.

format(val){
  if(val===true){
    return "Yes"
  }
  else if(val===false){
    return "No"
  }
}

[applepqgrid]

Hi Admin,

The drop down is in the header filter, and the filtering is local.

The values from the response is either true/false and I have an image displayed in the UI based on true/false.

So In filter, instead of true/false I need to display yes/no and on selection as well yes/no should be displayed in the search field. But the values the filter takes is true/false to filter.
Kindly let me know, how we can achieve it.

[paramvir]

I understand you want to display "yes" instead of true and "no" instead of false in filter dropdown and search field.

The solution is already shared in previous post to use column.format. Did you get a chance to try it?

Please share a jsfiddle/ plnkr or the whole column definition if it's not working for you.