foreach PanelBar arrows expand collapse

[Danny]

Hi there,

I'm using kendo PanelBar with foreach for the nested contents, here is the code:

<div class="col-lg-12">
                @(Html.Kendo().PanelBar()
                .Name("OrganizerTour")
                .ExpandMode(PanelBarExpandMode.Multiple)
                .HtmlAttributes(new { style = "" })
                .Items(panelbar =>
                {
                    foreach (var result in Model)
                    {
                        panelbar.Add().Text("Organizer: " + @result.organizerName).Expanded(true)
                            .Items(tour =>
                            {
                                tour.Add().Expanded(true).Content(@<div class="panel-content">
                                    <div class="row dashboard-grid">
                                        @RenderGrid(result.Result)
                                    </div>
                                </div>);
                            });
                    }
                })
                )
            </div>

When each PanelBar is expanded, there are two arrows showing (see attached) - it's fine when collapsed.

How can I remove the bottom arrow? Or is it something wrong with the codes above?

[Ivan Danchev]

Hi Danny,

The appearance issue is caused by the child items not having text set, which causes the child item's dropdown arrow to be positioned incorrectly. We would suggest either to set text to child items, e.g.:

.Items(tour =>
{
    tour.Add().Expanded(true).Text("SubItem").Content(@<div class="panel-content">
        <div class="row dashboard-grid">
            @RenderGrid(result.Result)
        </div>
    </div>);
}

Or to add the content directly to the parent and not within child items with no text.

Regards,
Ivan Danchev
Progress Telerik

[Danny]

Great, thanks so much. I changed it to this instead:

<div class="col-lg-12">
    @(Html.Kendo().PanelBar()
        .Name("OrganizerTour")
        .ExpandMode(PanelBarExpandMode.Multiple)
        .HtmlAttributes(new { style = "" })
        .Items(panelbar =>
        {
            panelbar.Add().Text("Tour Search Results").Expanded(true)
            .Items(tour =>
            {
                foreach (var result in Model)
                {
                    tour.Add().Expanded(true).Text("Organizer: " + result.organizerName).Content(@<div class="panel-content">
                        <div class="row dashboard-grid">
                            @RenderTourGrid(result.TourResult)
                        </div>
                    </div>);
                }
            });
        })
    )
</div>

[Ivan Danchev]

Hi Danny,

Thank you for the follow up. I am glad the suggested change to the nested items configuration fixes the issue.

Regards,
Ivan Danchev
Progress Telerik