Filter on Tree or Nested Data

Question

I have seen in one of the issues "Filter on Tree or Nested Data #1562" Oli has mentioned that

Hey @fr0z3nfyr Filtering is supported on tree child nodes since version 4,2 Cheers Oli :)

I am unable to find any example or the code to search nested data. My code works perfectly fine for flat tables, but with nested tables it only works for the root node.


            //data - the data for the row being filtered
            //filterParams - params object passed to the filter

            var match = false;
            for (var key in data) {

                if (data[key] != null) {
                    if ((data[key]).indexOf(filterParams.value) != -1) {
                        match = true;
                    }
                }

            }

            return match;
        }
        function updateFilter(){

            if ($("#filter-field").val() == "All Columns") {
                table.setFilter(matchAny,{ value:  $("#filter-value").val()});
            } else {
                table.setFilter($("#filter-field").val(), "like", $("#filter-value").val());
            }
            //var filter = $("#filter-field").val() == "All Columns" ? matchAny : $("#filter-field").val() ;

        }```



Oli could you please point me to an example where Nested data filtering is supported

Here is a less verbose recursive implementation: https://stackoverflow.com/a/68155905/7576114 — David Fiaty, Jun 28 '21 at 03:54

score 0 · Answer 1 · answered Feb 18 '20 at 04:39

I was able to solve this, but by re-setting table data with filtered value and also the tree structure is not maintained in the filtered list. I can maintain the tree structure with some changes in code, but this flat looks more like what I needed once filtering is done.

// This method iterates through the dataRows and its tree children and call a recursive function which creates the filtered table data.

function updateFilter() {

            var filtertableData = [];
            table.getRows().filter(function (row) {
                var rootData = row.getData();
                rootData._children = [];
                matchData(rootData, filtertableData);

                var childRows = row.getTreeChildren();
                searchForChildRows(rootData,childRows,filtertableData);
                 while (childRows.length != 0) {
                    for (var i = 0; i < childRows.length; i++) {
                        var childrow = childRows[i];
                        var childData = childrow.getData();
                        childData._children = [];
                        childRows = childrow.getTreeChildren();
                        searchForChildRows(childData,childRows,filtertableData); 

                    }
                }



            });

           table.setData(filtertableData);
        }

function matchData(rootData, filtertableData, childdata) {
        if (typeof childdata === "undefined") {
            for (var key in rootData) {
                console.log(key);
                console.log(allVisibleCBSCols);
                if (rootData[key] != null && typeof rootData[key] == 'string' && allVisibleCBSCols.includes(key)) {
                    if ((rootData[key]).indexOf($("#filter-value-Project").val()) != -1) {

                        filtertableData.push(rootData);
                        break;
                    }
                }

            }
        } else {
            for (var key in childdata) {
                if (childdata[key] != null && typeof childdata[key] == 'string' && allVisibleCBSCols.includes(key)) {
                    if ((childdata[key]).indexOf($("#filter-value-Project").val()) != -1) {
                        //rootData._children.push(childdata);
                        filtertableData.push(childdata);
                        break;
                    }
                }

            }
        }
    }



 function searchForChildRows(rootData,childRows,filtertableData) {
        for (var i = 0; i < childRows.length; i++) {
             var childrow = childRows[i];
             var childData = childrow.getData();
             childData._children = [];
             matchData(rootData,filtertableData,childData);

        }
    }

Filter on Tree or Nested Data

1 Answers1