Filter drop down value to be different to displayed

[jplevene]

{dataIndx:"DEPOT_ID", title:"Name",
   render: function(ui){ ... returns name from ID.... }, 
   filter: {
      crules: [{condition:"range"}],
      conditionList: ["range"],
      options : [{"1":"London"}, {"2":"Manchester"}, {"3":"Birmingham"}],
      gridOptions: {
         stripeRows: false,
         numberCell: {show: false},
         filterModel: {header: false}
      }
   }
},

My grid displays depots, however depots are based on a unique ID on my server.  The NAME field is just a string and is not necessarily unique.  If I want to select a depot, the server wants the DEPOT_ID integer field and not the NAME field.

Basically I want the drop down to display the NAME but return return the DEPOT_ID to the server for filtering, so I add

Code: [Select]

filter.options : [{"1":"London"}, {"2":"Manchester"}, {"3":"Birmingham"}],
Only issue is that in the "filter box" on the header displays the DEPOT_ID numbers and not the NAME strings.  How do I fix this?

Also, how do I add "children" for each depot option so it's a pivot grid or tree, so under "London" I want to list each London sub depot name?  I want to select just a sub depot without selecting London or I want to select London, other depots and maybe a few sub depots:

✓ London
      Sub 1
   ✓ Sub 2
      Sub 3
   Manchester
   ✓ Sub 4
      Sub 5
   Birmingham

OR

   London
     ✓ Sub 1
     ✓ Sub 2
        Sub 3
✓ Manchester
        Sub 4
        Sub 5
✓ Birmingham

To do above my get out of jail option is just to add some " " before each Sub in the NAME and stick with a flat list.  Is there a cleaner and better way?

[paramvir]

1) Filter dropdown can share the render of the corresponding grid column. Example: https://paramquery.com/pro/demos/filter_custom

Code: [Select]

selectGridObj: function(ui){
    //add renderLabel to first column.
    ui.obj.colModel[0].renderLabel = ui.column.render;
}

2) To add grouping in filter dropdown, there are 2 ways:

a) Use filter.groupIndx

Example: ShipRegion column in https://paramquery.com/pro/demos/filter_header_local

b) Since the filter dropdown uses pqgrid under the hood, same API of grid i.e., groupModel or treeModel can be used to turn it into a row grouping grid or a treegrid. You just need to add groupModel or treeModel to filter.gridOptions.

[jplevene]

Using "render" and "diExtra" doesn't work as I am setting the rows with "options"

I actually thought instead of showing the names, could it show how many are selected or blank for none?

[paramvir]

1) Please keep options in the format:
[
  {fieldName1: id, fieldName2: name },
 ....
]

and write custom render for the pqgrid column in filter dropdown

2) Number of selected checkboxes can be counted by Checkbox(...).getCheckedNodes() and can be displayed in the dropdown grid header.

[jplevene]

How do I insert the code and what event do I need to listen to?

Please note that before the grid opens, some filters are preset programatically before the data is fetched.

[paramvir]

Assuming you have good reason to use filter.options instead of the grid inbuilt mechanism to build filter dropdown options.

Add the filter optons in fitler.options as you have done earlier, only change the format. Write the custom render in selectGridObj callback. ui.obj is the grid initialization object in the callback and colModel can be accessed by ui.obj.colModel


2) you would need to add selected: true to the rows corresponding to prefetched filter values.

Code: [Select]

var val = ui.column.filter.crules[0].value || [],
      di = ui.column.dataIndx;
               
            options.forEach(function (rd) {
                if (val.indexOf(rd[di]) >= 0) {
                    //select the checkbox.
                    rd.selected = true;
                }
            })


[jplevene]

Have to use filter options as using paging and all the options might not load on the first page.

[paramvir]

This example can be used to load all the options remotely.

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

[jplevene]

1) Thanks, you misunderstood about loading remotely, and I know a few ways, but I still have to use options and have a good reason for doing so (I wouldn't if I didn't have to).

2) I am still having trouble filling in the column header input/select with the quantity of how many options have been checked in the range, instead of just the comma string of numbers.  I have done:

Code: [Select]

dataIndx:"DEPOT",
filter: {
crules: [{condition:"range"}],
selectGridObj: function (ui) {
ui.obj.colModel[0].renderLabel = function(ui){ return ui["rowData"]["NAME"]; };
},
gridOptions: {
stripeRows: false,
numberCell: {show: false},
filterModel: {header: false},
},
options: [
{"DEPOT":1, "NAME":"London},
{"DEPOT":2, "NAME":"Manchester},
{"DEPOT":3, "NAME":"Birmingham},
{"DEPOT":4, "NAME":"Glasgow},
{"DEPOT":5, "NAME":"Leeds},
...
]
},...
What I want to accomplish is that on the column header in the input (that looks like a select), I want to make it blank if all or nothing selected, "[1]" if one option is selected, "[2]" if 2 options are selected, etc.  Also the filter might also be set programmatically and not just with the drop down select grid.

[paramvir]

2) Filling in the column header filter cell with custom value is not feasible currently, it has been added in the upcoming version.

[jplevene]

👍

Please could you also give the option to put the values (as it does currently) or just the quantity cheked.

Also, do you have an ETA for the next version?