Current filter:
                                You should refresh the page.
                                  • [DevExpress Support Team: CLONED FROM T540773: Issues with filter list sorting and cascading filters]
                                    Hello DevEx support,

                                    I'm trying to customize a datagrid input form to fulfill the customers requirements. When it came to filtering and related sorting I encountered some issues I could not fix by myself. So please allow me to ask you for support. Attached a simple example to demonstrate the problems.

                                    Cascading lookups / filters

                                    The cascading lookups in edit form (Country -> Region) work fine. The selection boxes of row filter and header filter do not cascade. Can you give me a hint on how this can be achieved?

                                    The desired result is as follows (example):
                                    - Header filter: If set to country "Botswana", then the region header filter should only show regions from Botswana and the camp filter should only show camps from Botswana regions. If additionally a region (or multiple) is selected then the camp filter should show only camps from the selected region(s).
                                    - Row filter: If "Botswana" is selected the regions dropdown should only show regions of Botswana.

                                1 Solution

                                Creation Date Importance Sort by

                                Hi Joerg,

                                To implement cascading lookups in the filter row, use the onEditorPrepared event to access dxSelectBoxes inside the lookup columns and update the data source of the dependent lookup based on the current master lookup value:

                                [JavaScript]
                                onEditorPrepared: function (e) { if (e.parentType !== "filterRow") return; if (e.dataField === "CountryId") { var lookup = e.editorElement.dxSelectBox("instance"); lookup.on("valueChanged", function (args) { e.setValue(args.value); childLookup.getDataSource().filter(['CountryId', '=', args.value]); childLookup.getDataSource().load(); }); } if (e.dataField === "RegionId") { childLookup = e.editorElement.dxSelectBox("instance"); } },

                                To implement cascading lookups in the header filter, specify the header filter data source of the dependent column as a function. Filter the data source based on the filterValues option of the master column:

                                [JavaScript]
                                headerFilter: { dataSource: function (options) { var dataSourceConfiguration = { store: aRegions, map: function (item) { return { text: item.Name, value: item.RegionId } } }; var countryIds = options.component.columnOption("CountryId", "filterValues"); if (countryIds) { var filter = []; for (var index = 0; index < countryIds.length; index++) { var countryId = countryIds[index]; filter.push(['CountryId', '=', countryId]); filter.push("or"); } filter.pop(); dataSourceConfiguration.filter = filter; } options.dataSource = dataSourceConfiguration; } }
                                • Joerg Schreder 08.01.2017

                                  Thank you for this information.

                                  1. Filter row: In general this works, but some issues remain.
                                  1.1) When the user selects two filters, let's say country=Botswana and region=Kalahari and now selects another country (e.g. Kanada) then the region selection remains Kalahari although this is not an item of Kanada. The region select box should be reset to (All) in this case.
                                  1.2) Steps to reproduce this issue: Select a country, then select one of the regions. Select regions (All) then select countries (All). Now open the regions select box again - it will show only the (All) item but no region.

                                  2. Header filter: This works fine, thank you. One question: How should your customers develop solutions like this by themselves? Just using the documentation provided by DevExpress? I'm an experienced software developer but I fear I wouldn't be able to manage this.

                                  Thank you.

                                • Gosha (DevExpress Support) 08.01.2017

                                  Hi Joerg,

                                  To resolve the issues with the filter row, use the following code:

                                  [JavaScript]
                                  lookup.on("valueChanged", function (args) { e.setValue(args.value); if (args.value) { childLookup.getDataSource().filter(['CountryId', '=', args.value]); } else { childLookup.getDataSource().filter(null); } childLookup.getDataSource().load(); childLookup.option("value", null); });

                                  Yes, I understand that the implementation of this functionality may not be obvious from our documentation. Yet, we have examples in our Support Center and demos that illustrate common scenarios. We constantly improve our docs and demos to cover more scenarios. Moreover, you can always write to our Support Center. We will always assist you.

                                • Joerg Schreder 08.01.2017

                                  Hi Gosha,

                                  many thanks for your support. It works now as needed.