How to set filter in table dropdown based on table

2019-04-13 07:09发布

问题:

The following question was driven by this SAPUI5 topic on SCN: 2 dropdownboxs, filtering second off the the value in first

  • We have a SAPUI5 table, containing two columns, each record in the table shows a dropdown: one for Divisions, and one for Business Units.
  • Depending on the value of the selected Division, the Business Unit dropdown should only show the BU's which are valid for the chosen division
  • The actual table data is stored in a named model tablemodel, the data for the dropdowns is stored in a named model metamodel

See below example of how the table should look like:

In order to be able to filter the Business Units on Division, the named model metamodel looks like:

divisions: [
    {
        division    : "div1",
        divisiondesc: "Division 1"
    }, 
    {
        division    : "div2",
        divisiondesc: "Division 2"
    }, //etc
],
bunits: [
    {
        busunit    : "bus1",
        busunitdesc: "Business Unit 1",
        division   : "div1"
    }, 
    {
        busunit    : "bus2",
        busunitdesc: "Business Unit 2",
        division   : "div3"
    }, //etc
]

so the 2nd dropdown (which binds to /bunits) can be filtered on property division.

The sap.ui.commons.table.Table is built in a JSView component as follows:

var oTable = new sap.ui.table.Table()
    //First column w/ dropdown Divisions
    .addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({
            text: "Division"
        }),
        template: new sap.ui.commons.DropdownBox({
            selectedKey: "{tablemodel>division}",
            items: {
                path: "metadatamodel>/divisions",
                template: new sap.ui.core.ListItem({
                    text: "{metadatamodel>divisiondesc}",
                    key: "{metadatamodel>division}"
                })
            }
        })
    }))
    //Second column w/ dropdown Business Units, which should be filtered
    .addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({
            text: "Business Unit"
        }),
        template: new sap.ui.commons.DropdownBox({
            selectedKey: "{tablemodel>bus_unit}",
            items: {
                path: "metadatamodel>/bunits",
                template: new sap.ui.core.ListItem({
                    text: "{metadatamodel>busunitdesc}",
                    key: "{metadatamodel>busunit}"
                })
                ,
                filters: [new sap.ui.model.Filter("division", sap.ui.model.FilterOperator.EQ, "{tablemodel>division}")]
            }
        })
    }))
    .bindRows("tablemodel>/");

As you can see from the above, the intended behavior is that the second dropdown will be filtered on property division with the value of the current table's division property (i.e. {tablemodel>division}).

(The full code is available in this JSbin project )

However...

For some reason the value for the current current table's division property is not being recognized, or is simply not set when the filter is created (I'm not able to tell which is true), resulting in an empty 2nd dropdown (i.e. no valid filter).

The error thus lies in the value binding of this single line of code:

filters: [new sap.ui.model.Filter("division", sap.ui.model.FilterOperator.EQ, "{tablemodel>division}")]

My question is:

  1. Is it possible at all to have a filter setup this way in a table, i.e. setting a filter value for each row using data binding like {tablemodel>division}? I know it works outside a table, but in this case the dropdown is a template with relative binding to the table data
  2. If not possible, how should I get it to work? I would suspect data binding should work implicitly, but for some reason it doesn't

Restrictions:

Ideally, I don't want to use an onChange event for the first dropdown, since the second dropdown should already be filtered based on the available table data, and not a selection-change made with the first dropdown.

Any help will be greatly appreciated!

=================================================

EDIT: I just tested with a page with nothing more than a single dropdown, and there it doesn't work either!...

If I use a filter where the filter value value1 is specified by data binding:

new sap.ui.model.Filter({
    path     : "division", 
    operator : sap.ui.model.FilterOperator.EQ, 
    value1   : "{/someProperty}"
})

then the dropdown does not render any items

However, if I hardcode a value at property value1:

new sap.ui.model.Filter({
    path     : "division", 
    operator : sap.ui.model.FilterOperator.EQ, 
    value1   : "Test"
})

Then the filter works as expected.

Bottomline:

Is it true we can't use data binding for specifying a filter value?

回答1:

it is true we can't use data binding for specifying a filter value. Please see the answer of your another question Not possible to set Filter value using data binding?.