TreeView Rendering Issue on iOS (iPhone/iPad) - Kendo UI 2021.2.616

[n/a]

We’re experiencing a rendering issue with the Kendo UI TreeView component on iOS devices (both iPhone and iPad). The problem occurs regardless of which browser is used — we’ve tested Safari, Chrome, and others, and the issue persists across all of them.

We’re currently using Kendo UI version 2021.2.616.

You can see attached screenshots.

Has anyone else encountered this problem or found a workaround/fix for TreeView rendering issues on iOS?

Used code:

@* tree view *@
<div class="col-md-3 col-lg-3">
    <div class="card border-primary treeview-container">
        <div class="card-header bg-secondary">
            <h5>Patient Events</h5>
            <div class="card-actions">
                <button class="btn btn-outline-primary"
                        id="btn-expand-treeview">
                    <i class="fas fa-chevron-down fa-fw"></i> Expand
                </button>

                <button class="btn btn-outline-primary"
                        id="btn-collapse-treeview"
                        style="display: none">
                    <i class="fas fa-chevron-up fa-fw"></i> Collapse
                </button>

                <button id="btn-new-event" class="btn btn-primary">
                    <i class="fas fa-plus fa-fw"></i> New
                </button>
            </div>
        </div>
        <div class="card-body">
            <div id="events-treeview" class="mb-1"></div>
        </div>
    </div>
</div>

JS:

    function bindEventsTreeView() {
        $eventsTreeView
            .kendoTreeView({
                template: treeViewChildItemTemplate,
                dataSource: [],
                loadOnDemand: false,
                select: onEventSelect,
                expand: function (e) {
                    const treeView = $eventsTreeView.data('kendoTreeView');
                    var item = treeView.dataItem(e.node);
                    item.expanded = true;
                    treeView.setDataSource(treeView.dataSource);
                    e.preventDefault();
                },
                collapse: function (e) {

                    const treeView = $eventsTreeView.data('kendoTreeView');
                    var item = treeView.dataItem(e.node);
                    item.expanded = false;
                    treeView.setDataSource(treeView.dataSource);
                    e.preventDefault();
                }
            });
    }

template:

<script id="treeview-child-item-template" type="text/kendo-ui-template">
    # if (!item.items) { #
    <h4>
        <span class="badge badge-light">
            <span # if (item.archived) { # style="color: crimson;" # } #>
                #: item.eye #
            </span>
        </span>
    </h4>
    # } #
    <span class="ml-2"><i class="#: item.spriteCssClass #"></i> #: item.text #</span>
</script>

[Martin]

Hiello, Craig,

Thank you for sharing your code.

I tested it in this Dojo example on an iPhone device, and I can't see any issues with the rendering. Would it be possible to modify it as needed so that I can observe the issues you are experiencing?

Looking forward to your reply.

Regards,
Martin
Progress Telerik