Grid Filter via treeview?

5 posts, 0 answers
  1. Jason
    Jason avatar
    11 posts
    Member since:
    Dec 2010

    Posted 28 Apr 2017 Link to this post

    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);
            }
        });
    }

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 02 May 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jason
    Jason avatar
    11 posts
    Member since:
    Dec 2010

    Posted 05 May 2017 in reply to Boyan Dimitrov Link to this post

    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
  4. Jason
    Jason avatar
    11 posts
    Member since:
    Dec 2010

    Posted 05 May 2017 Link to this post

    And an even simpler example with a basic hierarchichal datasource:  http://dojo.telerik.com/IXOjO
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 09 May 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top