Kendo Filter Multi Check for TreeList

[Lee]

I'm trying to add a column selector to the Kendo Tree List. I have it successfully working in the KendoGrid but when I use it in a treelist, I get a Jquery maximum call stack exceeded error when the kendoFilterMultiCheck is initialized. Do I need to do something differently for a Kendo Grid vs a Treelist? Here is my code:

function initKendoGridNestedColumnSelector(gridId, columnSelectorContainer) {
    if (!columnSelectorContainer) {
        $(`#${gridId}`).before(`<div id="columnChooser_${gridId}" class="column-selector"></div>`);
        columnSelectorContainer = `columnChooser_${gridId}`;
    }

    let grid;
    if ($(`#${gridId}`).hasClass("k-treelist")) {
        grid = $(`#${gridId}`).data("kendoTreeList");
    } else {
        grid = $(`#${gridId}`).data("kendoGrid");
    }

    let visibleColumns = [];
    let includedColumns = [];
    let columns = grid.columns;
    $.each(columns, function (index, column) {
        if (column.columns) {
            $.each(column.columns, function (indexLevel2, columnLevel2) {
                if (columnLevel2.columns) {
                    $.each(columnLevel2.columns, function (indexLevel3, columnLevel3) {
                        if (!columnLevel3.hidden) {
                            visibleColumns.push({ value: columnLevel3.field, operator: "eq", field: "field" });
                        }
                        if (!Object.prototype.hasOwnProperty.call(columnLevel3, "menu") || columnLevel3.menu) {
                            columnLevel3.display = `${columnLevel2.title} ${columnLevel3.title}`;
                            includedColumns.push(columnLevel3);
                        }
                    });
                } else {
                    if (!columnLevel2.hidden) {
                        visibleColumns.push({ value: columnLevel2.field, operator: "eq", field: "field" });
                    }
                    if (!Object.prototype.hasOwnProperty.call(columnLevel2, "menu") || columnLevel2.menu) {
                        columnLevel2.display = `${column.title} ${columnLevel2.title}`;
                        includedColumns.push(columnLevel2);
                    }
                }
            });
        } else {
            if (!column.hidden) {
                visibleColumns.push({ value: column.field, operator: "eq", field: "field" });
            }
            if (!Object.prototype.hasOwnProperty.call(column, "menu") || column.menu) {
                column.display = column.title;
                includedColumns.push(column);
            }

        }
    });
    let chooserDs = new kendo.data.DataSource({
        data: includedColumns,
        filter: {
            filters: visibleColumns,
            logic: "or"
        }
    });
    $(`#${columnSelectorContainer}`).kendoFilterMultiCheck({
        field: "field",
        itemTemplate: function (e) {
            if (e.field == "all") {
                return "<li class='k-item'><label class='k-label'><strong><input type='checkbox' /><span>#= all#</span></strong></label></li>";
            }
            return "<li class='k-item #= data.menu === false ? '' : ''#'><label class='k-label'><input type='checkbox' name='" + e.field + "' value='#=field#'/><span>#= (data.title) ? display : field #</span></label></li>";
        },
        dataSource: chooserDs,
        search: true,
        messages: {
            filter: translateText("Done", "Global"),
            selectedItemsFormat: "{0} " + translateText("Columns Selected", "Global"),
            clear: translateText("Hide All", "Global")
        },
        refresh: function (e) {
            if (e.sender.dataSource.filter()) {
                var columnsToShow = e.sender.getFilterArray();
                $.each(includedColumns, function (i, col) {
                    if (!col.field) {
                        return true;
                    }
                    if (col.field && columnsToShow.indexOf(col.field) > -1) {
                        grid.showColumn(col.field);
                    } else {
                        grid.hideColumn(col.field);
                    }
                });
            } else {
                var columns = includedColumns;
                $.each(columns, function (index, col) {
                    grid.hideColumn(col.field);
                });
            }
        }
    })
        .find(".k-i-filter")
        .removeClass("k-i-filter")
        .addClass("k-i-columns");
    $(`#${columnSelectorContainer}`).find(".k-grid-filter").attr("title", translateText("Select Columns", "Global"));
    $(`#${columnSelectorContainer}`).find(".k-grid-filter").attr("aria-label", translateText("Select Columns", "Global"));
    $(`#${columnSelectorContainer}`).find(".k-grid-filter").addClass("btn btn-link k-state-active");
    $(`#${columnSelectorContainer}`).find(".k-grid-filter").append(translateText("Select Columns", "Global"));

    function grid_columnHide(e) {
        let datasource = e.sender.dataSource;
        let column = e.column.field;
        let filter = datasource.filter();
        let index = null;
        if (filter && filter.filters) {
            index = findObjectIndexByProperty(filter.filters, "field", column);
        }
        if (index !== null) {
            datasource.filter([]);
            $(".k-grid-search input").val("");
        }
    }

    grid.bind("columnHide", grid_columnHide);
}

[Martin]

Hello, Lee,

I tested the code in this Dojo example to try to reproduce the error, but it appears to be working as expected. Could you please let me know if I am missing something?

Regards,
Martin
Progress Telerik