Questions on Kendo UI for jQuery Forum

1 answer

11 views

I have a TreeList control where the data is kept in an array in memory - the user will save manually after editing everything they need to.

One problem I'm facing is that if a new record is created, and then subsequently edited - it will disappear after either Save or Cancel.

I've removed a lot of the code for brevity - but this is a working example of what I have:

https://dojo.telerik.com/tDidtCqZ

Any idea what I'm doing wrong?

TreeList

answered on 23 Jun 2025

1 answer

45 views

Kendo Treelist Get Options.noRecords setting from Databound

How do I get the e.sender.options.noRecords setting from a KendoTreeList databound event? It doesn't seem to be with the options like in a kendoGrid, yet it does seem to respond to adding or removing that option.

TreeList

answered on 14 Mar 2025

1 answer

62 views

Is it possible to do script/code injection with the "Drag and Drop" feature?

Is it possible to prevent script/code injection with the "Drag and Drop" feature? It seems text is encoded when displayed but executed on drag and drop. I only tested this with the Grid and TreeList components.

answered on 06 Nov 2024

0 answers

53 views

Add Class to Treelist Arrow

I'm trying to add a class to the kendo treelist arrow based on the data in the grid, however when I expand a row now, the class disappears for this and all other rows. How can I retain that class? Here is a dojo with an example. In the dojo, you will notice that if the person's name is not "Guy Wooten", they get a class of "maroon". That is then used to turn the drop arrow red. As soon as you click the person, the arrow turns black. I need it to stay red. You'll also notice that none of the subsequent ones have the red anymore either. How do I fix that?

https://dojo.telerik.com/@dojolee/IyOGeduk

Note: Neither versions 2022 or 2024 work correctly, but in 2022, the subsequent rows keep their class.

TreeList

updated question on 26 Jul 2024

0 answers

49 views

TreeList expander control disappears or does not work if control is reloaded with new TreeListDataSource

Hi,

I have attempted to reload a Kendo TreeView control with a new TreeViewDataSource...

function reloadLists() {

    console.log("In reloadLists():");

    var ds2 = new kendo.data.TreeListDataSource({ data: actionsV2, schema: 
                                                  { model: Models.TREELISTMODELTWO } });
    ds2.read();
    var vw2 = ds2.view();
    _view.set("actionsObserv", vw2);
    $("#actionsTreelist").data("kendoTreeList").setDataSource(_view.get("actionsObserv"));
}

...but when the new dataSource is loaded I noticed the expander arrows do not work. The top one disappears when clicking on it:

The other ones do not function, there is no change when I click on them. I cannot contract an expanded branch, nor can I expand a contracted branch. What am I missing? Is this a bug? Here is a link to the Kendo Dojo with an example:

Kendo TreeList Reload List Example | Kendo UI Dojo (telerik.com)

Thanks again for your help and patience ^__^

George

Data Source

TreeList

updated question on 19 Jul 2024

1 answer

74 views

How to define a Model for a kendoTreeList?

Hi,

I am trying to define a Model for my kendoTreeList.

Normally I would define a Model like:

var Product = kendo.data.Model.define({
    id: "ProductID", // Defines the field to be used as the identifier.
    fields: {
        // Define the fields of the model and their data types.
        ProductID: { type: "number" },
        ProductName: { type: "string" },
        QuantityPerUnit: { type: "string" },
        UnitPrice: { type: "number" },
        UnitsInStock: { type: "number" },
        Discontinued: { type: "boolean" }
    }
});

But with the TreeList you normally have to define the Model like this with a parentId:

                            model: {
                                id: "EmployeeId",
                                parentId: "SupervisorId",
                                fields: {
                                    SupervisorId: { field: "SuperviorId", nullable: true },// this is the parent.
                                    EmployeeId: { field: "EmployeeId", type: "number" }, 
                                },
                                expanded: true
                            }

I don't think kendo.data.Model.define works for this type of model because it doesnt have some of the properties like parentId or expanded. Is there something I can substitute it with?

What I am trying to do is create a class of Models and I can slide the Model definition in like:

    $("#reportsTreeList").kendoTreeList({

        dataSource:
        {
            data: reports,
            schema: {
                model: Models.TREELISTMODEL
            }
        },
        height: "auto",

OR:

var ds = new kendo.data.DataSource({ data: reportsList, schema: { model: Models.TREELISTMODEL }});

this approach seems to work with a kendo spreadsheet or a grid... but TreeView seems to break.

Thanks again for your help and patience!

George

TreeList

answered on 18 Jul 2024

1 answer

73 views

Kendo Filter Multi Check for TreeList

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

TreeList

answered on 27 Jun 2024

0 answers

102 views

is it possible to override filter function

to override apply filter function?

TreeList

asked on 10 Jun 2024

1 answer

85 views

Upside Down Tree List

This is an odd request, I know. I have a client asking for a tree list style grid that opens up instead of down when you click on a parent field. They want this so that, when expanded, it matches their excel spreadsheets which have children at the top and subtotals at the bottom of each category followed by grand totals. Basically, think of the whole table body being flipped upside down like this (but it should be a grid with multiple columns):

    Child of 1
    Child of 1
    Child of 1
Parent 1
    Child of 2
        Grandchild of 2a
    Child of 2 (2a)
Parent 2

TreeList

answered on 05 Jun 2024

1 answer

95 views

Treelist not allowing filter when reorderable

I am seeing an issue with my kendo treelist control in version (2023.2.718) which is reproducible in kendo dojo (https://dojo.telerik.com/iDogeqoh). Essentially, I set my treelist to be reorderable and filterable using row filters. When I do this, I cannot type into the filter and holding and dragging the filter box seems to treat it like a header instead. In fact, when you click and drag that box, the screen freezes and you can't do anything with the page... I found that the selector being passed to the reorderable filter was '.k-grid-header th.k-header' which was being filled by the filter row. If you change this value to '.k-grid-header tr:not(.k-filter-row) th.k-header', the issue goes away.

TreeList

answered on 31 Oct 2023