Grid Filter via treeview?

[Jason]

Can I change the filter to be a treeview if I have a hierarchical data source for it?  I've been trying but not seeing any data.If I view the source I can see the treeview and all the data but the filter doesn't show the data on the screen.

 

My column is defined like this:

field: "country",
                    headerTemplate: '<span title="' + myTranslator.translate("Country", "Country") + '" data-toggle="tooltip" data-placement="right">' + myTranslator.translate("Country", "Country") + '</span>',
                    filterable: {
                        ui: createCountrySelect,
                        extra: false,
                        operators: {
                            string: {
                                contains: myTranslator.translate("Contains", "Contains")
                            }
                        }
                    },
                    groupHeaderTemplate: kendo.template($("#group-row-template").html())

 

And the createCountrySelect:

 

function createCountrySelect(element) {
    element.removeAttr("data-bind");

    var ds = new kendo.data.HierarchicalDataSource({
        data: vm.unflattedGeographicUnits,
        schema: {
            model: {
                id: "recordID",
                hasChildren: function (node) {
                    return (node.items && node.items.length > 0);
                },
                children: {
                    schema: {
                        data: "items",
                        model: {
                            id: "recordID",
                            hasChildren: function (node) {
                                return (node.items && node.items.length > 0);
                            }
                        }
                    }
                }
            }
        }
    });

    element.kendoTreeView({
        dataSource: ds,
        dataTextField: "name",
        change: function (e) {
            var filter = { logic: "or", filters: [] };
            var values = this.value();
            $.each(values, function (i, v) {
                filter.filters.push({ field: "geographicUnits", operator: "contains", value: v });
            });
            vm.countryDataSource.filter(filter);
        }
    });
}

 

[Boyan Dimitrov]

Hello,

The same approach for filtering is used in our Use MultiSelect for Column Filtering how-to example. As far as I understand the same idea is used here. I would suggest to inspect the filters applied to the grid datasource and check whether the logic, operator, fields value are correct. More information about the filters collection you can find in the filter.filters article. 

Regards,
Boyan Dimitrov
Telerik by Progress

[Jason]

I would have expected the treeview to work the same way as well so I used the multiselect filtering as my starting point.  It looks like the treeview is being built but nothing displays except a text box.  I modified that example and changed it to treeview and was able to replicate my issue.  Please let me know what I am doing wrong.  http://dojo.telerik.com/aMoKi

[Jason]

And an even simpler example with a basic hierarchichal datasource:  http://dojo.telerik.com/IXOjO

[Boyan Dimitrov]

Hello Jason,

In general the problem here is that the Kendo UI TreeView should be initialized from div element, but the default element in the filter menu is an input element. The TreeView can not be initialized from an input element. Even if you add a div element and remove the input the UI might break since it is designed to have an input widget. My suggestion is to implement a separate filter from with a Kendo UI TreeView and a button outside the grid. In order to apply filter expression to the grid you can use the Kendo UI DataSource filter method. 

Regards,
Boyan Dimitrov
Telerik by Progress

[Josiah]

 an example of an outside Treeview for filtering would be very helpful. I have done this previously, but synchronizing that filter with all of the other filters was proving difficult. Plus,  if you're persisting grid status, there's a huge headache of trying to keep the Treeview synchronized.  so an example like you talked about working with grid persistence what I think be a huge help to the community. Thank you